Javascript：了解事件委托处理

Question

我想在同一页上使用不同形式的事件委托。但是，我在尝试提交表单时遇到了一个有趣的问题。

我试着在一个表单上（点击提交按钮）“点击”，并且完全知道事件委托在本表中固有地设置了“点击”。

但是，问题来自事实上'click'事件实际上是在整个页面上设置的，而不仅仅是表单或按钮元素。所以无论我点击哪个页面，该表单的'click'事件都会被触发。所有浏览器都会发生这种情况。

“更改”事件也发生了同样的情况。当我在表单上设置“更改”事件时，会触发表单的子字段以及特定表单节点外的其他字段。

所以虽然我知道之前已经有questions询问过事件委托，但他们并没有真正回答这个问题。这是否是一个问题？也许这是事件代表团打算如何工作？但如果是这样，那么对于整个文档触发的事件是不是浪费内存？解决办法是什么？

此外，是否有一个跨浏览器的方式来停止传播纯JavaScript？我发现最好的是在Quirksmode.org：

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

我知道我可以按照类型过滤的事件触发时，但是是唯一一个可以做什么？请帮我理解这一点！

编辑：

的具体问题是，是否委托的事件处理在其特定领域的事件会/也可以触发对文档的其余部分的活动形式？如果是这样，如何处理？ 如果这不是事件授权的预期行为，那么可能是什么原因导致它？

Answer 1

事件会通过它的祖先冒泡。如果你有HTML结构;

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

...你点击输入元素，你会看到点击input元素起源的事件，然后泡了它的祖先（span，h2，div，body，document）。它不会在strong火，因为它不是一个祖先。见http://jsfiddle.net/2QQFS/为例（看控制台当你点击的<input />框之一。

你<form />不是应该被嵌套。如果你在连接各<form />元素上的事件处理程序，并看到事件在其他形式等形式的触发事件，我想验证你的HTML（http://validator.w3.org），以确保你没有错过关闭标签的地方，或什么的。

要查看哪些元素事件从起源 ，您可以使用e.target和e.srcElement（IE < 8）。

Answer 2

您没有显示注册事件侦听器的实际代码。

让this fiddle与preventDefault和stopPropagation一起玩。

我希望它是不言自明的。如果你喜欢，可以把小提琴叉起来。

注意form2.input没有事件监听器，事件冒泡到outerDiv。

form1是根据相关的用户控件进行停止和阻止的人。

输出区应该说明发生了什么。

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);