事件冒泡事件委托
[英]Event bubbling for event delegation
問題描述
我正在嘗試使用以下代碼實現事件委托：
<html>
<head>
<script>
document.addEventListener('click', function(e){
alert(e.target.className);
}, false);
</script>
</head>
<body>
<ul class="list">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
</ul>
</body>
</html>
我希望事件冒泡，這樣，當我單擊<li>項時，一個警報將顯示item ，然后另一個警報將顯示list 。 但是此代碼僅使用item給出警報。 我如何修改它以便事件冒泡？
5 個解決方案
解決方案1
1 2012-11-28 19:02:50
我剛剛發布了一個小型事件委托庫，以使執行此類操作變得更加容易。 在http://craig.is/riding/gators上查看
你可以做
Gator(document).on('click', 'li', function() { alert('li clicked!'); });
Gator(document).on('click', 'ul', function() { alert('ul clicked!'); });
這會將一個單擊處理程序綁定到文檔，並將相應地調度事件。
除非您停止傳播，否則它們都將在您單擊li時觸發。
解決方案2
1 2012-02-03 19:35:48
當您將單擊處理程序綁定到document對象時，您不能期望它被多次調用。 它只會被調用一次（在document對象上）。
順便說一句，該事件確實使DOM樹冒泡 。 如果沒有，它將不會到達document對象，也不會看到任何警報框。
因此，該事件在LI元素處觸發，然后一直冒泡直至調用單擊處理程序的document對象。
順便說一句，通常您不會一路委托給document對象，而是委托給最接近的共同祖先。 例如，如果要處理對LI元素的單擊，則可以委派給UL元素：
var list = document.getElementsByClassName( 'list' )[0];
list.addEventListener( 'click', function ( e ) {
var item = e.target;
// handle item click
}, false );
現場演示： http ： //jsfiddle.net/rCVfq/
解決方案3
1 2012-02-03 19:40:05
您需要為列表添加事件以提醒它。 事件是由父對象捕獲的，但是沒有綁定到它們的事件，因此不會發出警報。 您需要為所有對象添加事件以提醒它。
解決方案4
1 已采納 2012-02-03 19:47:31
事件回調僅觸發一次，但這並不意味着事件不會冒泡。 僅在恰好元素偵聽事件時才執行回調。
如果您確實希望將警報一直觸發到祖先，請在回調中一一添加祖先的警報。 您不必將偵聽器添加到所有祖先，這將導致消耗更多的內存。
解決方案5
0 2014-01-03 06:32:01
您可以使用某種循環方法來調用這兩個警報：
var list = document.getElementsByClassName('list')[0];
list.addEventListener("click", function (e) {
var target = e.target;
while (target !== list) {
switch(target.nodeName) {
case "LI": //alert('li clicked!')
break;
case "UL": //alert('ul clicked!')
break;
}
target = target.parentNode;
}
});
mootools 在使用 Event.Delegation (:relay) 時停止事件冒泡
[英]mootools stop event bubbling when using Event.Delegation (:relay)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.