Understanding Event Delegation Handling

Question

I am trying to use event delegation for different forms on the same page. However, I am getting an interesting problem while trying to submit the forms.

I tried 'click' on one form (intended for the submission button) knowing fully well that event delegation inherently sets 'click' on the entire form.

However the problem comes from the fact that the 'click' event is actually set on the whole page and not only the form or the button element. So wherever I click on the page, the 'click' event for the form is triggered. And this is happening for all browsers.

The same thing is happening for the 'change' event. When I set the 'change' event on the form, it is triggered for both child fields of the form, and other fields outside the particular form node.

So while I know there have been questions asked about event delegation before, they do not really answer this problem. Is it even a problem? Maybe this is how event delegation is intended to work? But if so, then is it not a waste of memory for the events to be triggered for the entire document? What is the solution?

Also, is there a cross-browser way to stop propagation in pure Javascript? The best I found was on Quirksmode.org:

function doSomething(e)
{    
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

I know I can filter the events by type when triggered but is that the only thing one can do? Please help me understand this!

Edit:

The specific question is whether delegating an event to a form for handling events on its specific fields will/can also trigger events on the rest of the document? If so, how to handle this? And if this is not the intended behavior of event delegation, then what might be causing it?

tl;dr. You should be more precise and concise - what's your question? — Reinmar, May 26 '13 at 21:09

Matt · Accepted Answer · 2013-05-26T21:31:42.560

An event will bubble though its ancestors. If you had the HTML structure;

<div>
    <h2>
        <span>
            <input />
        </span>
        <strong>
            Blah
        </strong>

... and you clicked the input element, you'd see click event originate on the input element, then bubble up its ancestors (span, h2, div, body, document). It wouldn't fire on the strong, because it's not an ancestor. See http://jsfiddle.net/2QQFS/ for an example (look at the console when you click on one of the <input /> boxes.

Your <form />s should not be nested. If you're attaching the event handler on each <form /> element, and seeing events on other form's trigger events on other forms, I'd validate your HTML (http://validator.w3.org) to make sure you haven't missed a closing tag somewhere, or something.

To see which element the event originated from, you can use e.target, and e.srcElement (IE < 8).

score 0 · Answer 2 · answered May 26 '13 at 23:35

You are not showing the actual code registering the event listener.

Have this fiddle to play with preventDefault and stopPropagation.

I hope it is self-explanatory. Fork the fiddle if you like.

Notice how form2.input does not have an event listener and events bubble up to outerDiv.

form1 is the one doing the stopping and preventing according to the associated user controls.

The output area should clarify what's going on.

HTML

<div id="outerDiv">
<div>
    <input id="pd" value="1" type="checkbox">Prevent Default in form1 keydown</input>
</div>
<div>
    <input id="sp" value="1" type="checkbox">Stop Propagation in form1 keydown</input>
</div>
<div>
    <button id="clear">Clear Output</button>
</div>
<form id="form1" action="">
    <div>
        <label>input of form1
            <input type="text" />
        </label>
    </div>
</form>
<form id="form2" action="">
    <div>
        <label>input of form2
            <input type="text" />
        </label>
    </div>
</form> <pre id="output">
    watch this spot
</pre>
</div>

JS

window.addEventListener('DOMContentLoaded', function (event) {
// console.log("DOMContentLoaded event handler ...");
var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
var output = document.getElementById('output');
var div = document.getElementById('outerDiv');
var clear = document.getElementById('clear');
clear.addEventListener('click', function (event) {
    output.textContent = ('\n' + clear.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' clears output');
}, false);
console.dir(output);
div.addEventListener('keydown', function (event) {
    output.textContent += ('\n' + div.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
}, false);
form1.addEventListener('keydown', function (event) {
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
    // prevents default of generating an input event
    if (document.getElementById('pd').checked) {
        event.preventDefault();
        output.textContent += ('\n\t' + form1.localName + '\'s ' + event.type + ' event handler does preventDefault');
    }
    // stops propagation up to div
    if (document.getElementById('sp').checked) {
        event.stopPropagation();
        output.textContent += ('\n\t\t' + form1.localName + '\'s ' + event.type + ' event handler does stopPropagation');
    }
}, false);
form1.addEventListener('input', function (event) {
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
}, false);
}, false);

Understanding Event Delegation Handling

2 Answers2