Why click event is fired twice?

Can someone tell me, why the event is fired twice for the following code:
http://jsfiddle.net/m8heyzgz/3/
Please open your console, firefox or chrome have console and watch the result after
you click on ‘div1’, then
The event walk through sequence will be:

  • div3
  • div2
  • div1
  • div3
  • div2
  • div1

As I know the capturing phase can be from top to bottom, and bubbling phase can be from the target to the parents nodes.

  • What is a proper way to add listeners to new elements after using AJAX to get the html content? (jQuery, Javascript)
  • addEventListener memory leak due to frames
  • Javascript attach events to elements rendered dynamically
  • Javascript only last event listener works
  • Listen to multiple keydowns
  • Onclick vs addEventListener
  • My question why, it’s fired 2 times in the same order ?

    HTML:

    <div id="div1">
        <div id="div2">
            <div id="div3">
                <form>
                    <ul>
                        <li>
                            <label>                            
                                <div>
                                    <div>div1</div>                            
                                </div>
                                <div>
                                    <div>div2</div>                            
                                </div>
                                <div>                                  
                                    <input type="checkbox" name="div3" value="div3" />
                                </div>
                            </label>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    

    js:

    var d1 = document.getElementById('div1');
    var d2 = document.getElementById('div2');
    var d3 = document.getElementById('div3');
    
    var f = function(e) {
        console.log(e.currentTarget);
    }
    
    d1.addEventListener('click', f);
    d2.addEventListener('click', f);
    d3.addEventListener('click', f);
    

  • addEventListener calls the function without me even asking it to
  • addEventListener in Internet Explorer
  • Javascript “addEventListener” Event Fires on Page Load
  • How to get original element from event?
  • addEventListener gone after appending innerHTML
  • why could a check if (document.addEventListener) returns false
  • 2 Solutions collect form web for “Why click event is fired twice?”

    I. Why is the order same?

    The 2 waves’ order is the same, because you only see the bubbling phase of both events, not the capturing. If you wanted to see the capturing, your addEventListener’s third parameter (useCapture) should be true.

    II. Why fired 2 times?

    1. The first click event is fired from the label, when you click on the label’s content.
    2. The second click event is fired from the label’s checkbox, by a synthetic click.

    +1. What is a synthetic click?

    A click initiated by a program code, not by an input device. (It fires a click event.)

    +2. Why does the synthetic click happen?

    Because it is the 4th step of the run synthetic click activation steps algorithm.

    +3. Why is this algorithm run by the browser?

    Because it respects the W3C’s recommendation:

    “The label element’s (…) activation behavior (…) should match the platform’s label behavior.” “For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label (…) could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user (…)

    See the HTML5 spec:

    “Except where otherwise specified by the following rules, a label element has no labeled control…

    If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element’s labeled control.

    …For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user…”

    http://www.w3.org/TR/html5/forms.html#labeled-control

    Hence clicking on your label element fires a synthetic click event on the first input in the label – answering the question in your comments.