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