Re: Change Event, Bubbling and IE8

On Thu, Jul 10, 2008 at 11:27 PM, Anne van Kesteren <annevk@opera.com> wrote:
> On Fri, 11 Jul 2008 05:29:40 +0200, Garrett Smith <dhtmlkitchen@gmail.com>
> 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

Received on Friday, 11 July 2008 07:35:39 UTC