|
»
»
»
Change Event, Bubbling and IE8
|
View:
New views
6 Messages
—
Rating Filter:
Alert me
|
 |
Change Event, Bubbling and IE8
by Garrett
::
Rate this Message:
This is a compliance issue with Internet Explorer. If a change event can bubble, what can it bubble up to? Will it be possible to observe a bubbled change on a FORM? http://www.w3.org/TR/DOM-Level-2-Events/events.html | change | The change event occurs when a control loses the input | focus and its value has been modified since gaining focus. | This event is valid for INPUT, SELECT, and TEXTAREA. element. | | * Bubbles: Yes | * Cancelable: No | * Context Info: None Internet Explorer 8 still does not support EventTarget, however, it does support bubbling. The result below from Safari3 and Firefox3 are that the change and submit events bubble and alerts are shown. IE8: No alert shown. ============================================================================= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Change </title> </head> <body> <h1>Form Dirty?</h1> <form id='big'> <fieldset id="ff"><legend>legend</legend> <select name='big'> <option>one</option> <option>two</option> </select> <textarea name="a">foo</textarea> <label> <input type="radio" name="df"/>radio </label> <input type="radio" name="df"/>radio <input type="checkbox"/> <input type='text'/> <input type="password"/> <input type="submit" value="go"/> </fieldset> </form> <script> var big = document.getElementById('big'); if(big.addEventListener) { big.addEventListener("change", getTimeStamp, true); big.attachEvent("submit", getTimeStamp, true); } else if(big.attachEvent) { big.attachEvent("onchange", getTimeStamp, true); window.attachEvent("submit", getTimeStamp, true); } function getTimeStamp(e){ alert(e.timeStamp); } </script> </body> </html> ============================================================================= If MSIE is not going to implement DOM Events, what should be the expected behavior of MSIE? Garrett |
|
|
Re: Change Event, Bubbling and IE8
by Anne van Kesteren-2
::
Rate this Message:
On Fri, 11 Jul 2008 05:29:40 +0200, Garrett Smith <dhtmlkitchen@...> wrote: > if(big.addEventListener) { > big.addEventListener("change", getTimeStamp, true); > big.attachEvent("submit", getTimeStamp, true); Note that with addEventListener if the last argument is true you're registering for the capture phase. -- Anne van Kesteren <http://annevankesteren.nl/> <http://www.opera.com/> |
|
|
Re: Change Event, Bubbling and IE8
by Garrett
::
Rate this Message:
On Thu, Jul 10, 2008 at 11:27 PM, Anne van Kesteren <annevk@...> wrote: > On Fri, 11 Jul 2008 05:29:40 +0200, Garrett Smith <dhtmlkitchen@...> > wrote: >> >> if(big.addEventListener) { >> big.addEventListener("change", getTimeStamp, true); >> big.attachEvent("submit", getTimeStamp, true); > bad........^ should be: document.addEventListener("submit", getTimeStamp, false); and further down: document.attachEvent("onsubmit", getTimeStamp); ...................................^ (that correction doesn't make any difference in IE; the submit event does not bubble up. However the DOM Events say submit will bubble, at least to document: | submit | The submit event occurs when a form is submitted. | This event only applies to the FORM element. | | * Bubbles: Yes | * Cancelable: Yes | * Context Info: None > Note that with addEventListener if the last argument is true you're > registering for the capture phase. > Then the events should not have fired in bubbling phase. But they did fire in bubbling phase in FF and Webkit. That's a bug, isn't it? | useCapture of type boolean | If true, useCapture indicates that the user wishes to | initiate capture. After initiating capture, all events of the | specified type will be dispatched to the registered | EventListener before being dispatched to any EventTargets | beneath them in the tree. Events which are bubbling upward | through the tree will not trigger an EventListener designated | to use capture. "Events which are bubbling upward through the tree will not trigger an EventListener designated to use capture." Revised example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Change </title> </head> <body> <h1>Form Dirty?</h1> <form id='big'> <fieldset id="ff"><legend>legend</legend> <select name='big'> <option>one</option> <option>two</option> </select> <textarea name="a">foo</textarea> <label> <input type="radio" name="df"/>radio </label> <input type="radio" name="df"/>radio <input type="checkbox"/> <input type='text'/> <input type="password"/> <input type="submit" value="go"/> </fieldset> </form> <script> var big = document.getElementById('big'); if(big.addEventListener) { big.addEventListener("change", getTimeStamp, false); document.addEventListener("submit", getTimeStamp, false); } else if(big.attachEvent) { big.attachEvent("onchange", getTimeStamp); document.attachEvent("onsubmit", getTimeStamp); } function getTimeStamp(e){ alert(e.type + ": " + e.timeStamp); } </script> </body> </html> ======================================================= Garrett > > -- > Anne van Kesteren |
|
|
Re: Change Event, Bubbling and IE8
by João Eiras-2
::
Rate this Message:
> Then the events should not have fired in bubbling phase. But they did fire in bubbling phase in FF and Webkit. That's a bug, isn't it? Old bug: https://bugzilla.mozilla.org/show_bug.cgi?id=235441 https://bugs.webkit.org/show_bug.cgi?id=9127 Opera gets this right, and therefore has problems with compatibility. On Fri, Jul 11, 2008 at 8:35 AM, Garrett Smith <dhtmlkitchen@...> wrote: > > On Thu, Jul 10, 2008 at 11:27 PM, Anne van Kesteren <annevk@...> wrote: >> On Fri, 11 Jul 2008 05:29:40 +0200, Garrett Smith <dhtmlkitchen@...> >> wrote: >>> >>> if(big.addEventListener) { >>> big.addEventListener("change", getTimeStamp, true); >>> big.attachEvent("submit", getTimeStamp, true); >> > bad........^ > should be: > > document.addEventListener("submit", getTimeStamp, false); > > and further down: > > document.attachEvent("onsubmit", getTimeStamp); > ...................................^ > > (that correction doesn't make any difference in IE; the submit event > does not bubble up. > > However the DOM Events say submit will bubble, at least to document: > > | submit > | The submit event occurs when a form is submitted. > | This event only applies to the FORM element. > | > | * Bubbles: Yes > | * Cancelable: Yes > | * Context Info: None > > >> Note that with addEventListener if the last argument is true you're >> registering for the capture phase. >> > > Then the events should not have fired in bubbling phase. But they did > fire in bubbling phase in FF and Webkit. That's a bug, isn't it? > > | useCapture of type boolean > | If true, useCapture indicates that the user wishes to > | initiate capture. After initiating capture, all events of the > | specified type will be dispatched to the registered > | EventListener before being dispatched to any EventTargets > | beneath them in the tree. Events which are bubbling upward > | through the tree will not trigger an EventListener designated > | to use capture. > > "Events which are bubbling upward through the tree will not trigger an > EventListener designated to use capture." > > Revised example: > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> > <html> > <head> > <title> Change </title> > </head> > > <body> > > <h1>Form Dirty?</h1> > > <form id='big'> > > <fieldset id="ff"><legend>legend</legend> > <select name='big'> > <option>one</option> > <option>two</option> > </select> > > <textarea name="a">foo</textarea> > <label> > <input type="radio" name="df"/>radio > </label> > <input type="radio" name="df"/>radio > <input type="checkbox"/> > <input type='text'/> > <input type="password"/> > <input type="submit" value="go"/> > </fieldset> > > </form> > > <script> > var big = document.getElementById('big'); > > if(big.addEventListener) { > big.addEventListener("change", getTimeStamp, false); > document.addEventListener("submit", getTimeStamp, false); > } else if(big.attachEvent) { > big.attachEvent("onchange", getTimeStamp); > document.attachEvent("onsubmit", getTimeStamp); > } > function getTimeStamp(e){ > alert(e.type + ": " + e.timeStamp); > } > </script> > > </body> > </html> > > ======================================================= > > Garrett > >> >> -- >> Anne van Kesteren > > |
|
|
Re: Change Event, Bubbling and IE8
by João Eiras-2
::
Rate this Message:
> Then the events should not have fired in bubbling phase. But they did fire in bubbling phase in FF and Webkit. That's a bug, isn't it? Old bug: https://bugzilla.mozilla.org/show_bug.cgi?id=235441 https://bugs.webkit.org/show_bug.cgi?id=9127 Opera gets this right, and therefore has problems with compatibility. On Fri, Jul 11, 2008 at 8:35 AM, Garrett Smith <dhtmlkitchen@...> wrote: > > On Thu, Jul 10, 2008 at 11:27 PM, Anne van Kesteren <annevk@...> wrote: >> On Fri, 11 Jul 2008 05:29:40 +0200, Garrett Smith <dhtmlkitchen@...> >> wrote: >>> >>> if(big.addEventListener) { >>> big.addEventListener("change", getTimeStamp, true); >>> big.attachEvent("submit", getTimeStamp, true); >> > bad........^ > should be: > > document.addEventListener("submit", getTimeStamp, false); > > and further down: > > document.attachEvent("onsubmit", getTimeStamp); > ...................................^ > > (that correction doesn't make any difference in IE; the submit event > does not bubble up. > > However the DOM Events say submit will bubble, at least to document: > > | submit > | The submit event occurs when a form is submitted. > | This event only applies to the FORM element. > | > | * Bubbles: Yes > | * Cancelable: Yes > | * Context Info: None > > >> Note that with addEventListener if the last argument is true you're >> registering for the capture phase. >> > > Then the events should not have fired in bubbling phase. But they did > fire in bubbling phase in FF and Webkit. That's a bug, isn't it? > > | useCapture of type boolean > | If true, useCapture indicates that the user wishes to > | initiate capture. After initiating capture, all events of the > | specified type will be dispatched to the registered > | EventListener before being dispatched to any EventTargets > | beneath them in the tree. Events which are bubbling upward > | through the tree will not trigger an EventListener designated > | to use capture. > > "Events which are bubbling upward through the tree will not trigger an > EventListener designated to use capture." > > Revised example: > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> > <html> > <head> > <title> Change </title> > </head> > > <body> > > <h1>Form Dirty?</h1> > > <form id='big'> > > <fieldset id="ff"><legend>legend</legend> > <select name='big'> > <option>one</option> > <option>two</option> > </select> > > <textarea name="a">foo</textarea> > <label> > <input type="radio" name="df"/>radio > </label> > <input type="radio" name="df"/>radio > <input type="checkbox"/> > <input type='text'/> > <input type="password"/> > <input type="submit" value="go"/> > </fieldset> > > </form> > > <script> > var big = document.getElementById('big'); > > if(big.addEventListener) { > big.addEventListener("change", getTimeStamp, false); > document.addEventListener("submit", getTimeStamp, false); > } else if(big.attachEvent) { > big.attachEvent("onchange", getTimeStamp); > document.attachEvent("onsubmit", getTimeStamp); > } > function getTimeStamp(e){ > alert(e.type + ": " + e.timeStamp); > } > </script> > > </body> > </html> > > ======================================================= > > Garrett > >> >> -- >> Anne van Kesteren > > |
|
|
Re: Change Event, Bubbling and IE8
by Garrett
::
Rate this Message:
On Fri, Jul 11, 2008 at 1:32 AM, João Eiras <joao.eiras@...> wrote: >> Then the events should not have fired in bubbling phase. But they did fire in bubbling phase in FF and Webkit. That's a bug, isn't it? > With the updated example, using useCapture=false, I believe that the change events should bubble up to the FORM, through the FIELDSET, and that the submit event should bubble up to document (even though FORM doesn't support "change" and document doesn't support "submit"). Is my understanding correct? Please confirm. Also, if the answer is "yes, they should" then what about IE? Should the MSIE event be expected to bubble? Does having a broken event model hamper development productivity? Can this be answered fairly by looking at existing web scripts? Is it reasonable to try to apply parts of the DOM Event standard to MSIE's event argument? Or should the entire event model be regarded as completely incompatible? I am asking because Microsoft refuses to implement addEventListener, and this seems to be including anything related to the different event model. bug: https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333958 http://blogs.msdn.com/ie/archive/2008/04/10/html-and-dom-standards-compliance-in-ie8-beta-1.aspx#8386501 docs onchange: http://msdn.microsoft.com/en-us/library/ms536912(VS.85).aspx onsubmit: http://msdn.microsoft.com/en-us/library/ms536972.aspx Legacy events onchange and onsubmit do not bubble as registered in the DOM 0 (I'm not suggesting this change). In FF and Saf, (e.g. form.onchange = callback) with one caveat: In FF and Saf, "change" event of a SELECT will bubble up. However, ISTM that if Microsoft were to add proper support for DOM Events, with callbacks registered via addEventListener, it would be possible to avoid conflict with legacy events and callbacks registered via attachEvent, and allow developers to use the standard DOM Event model http://www.w3.org/TR/DOM-Level-2-Events/events.html Is there a test suite for events? Searching the web, I could not find an EcmaScript events test suite. Garrett [snip of previous top-posted msg] |
| Free Forum Powered by Nabble | Forum Help |
