事件委托的事件冒泡

发布于 2025-01-02 11:26:40 字数 612 浏览 0 评论 0原文

我正在尝试使用以下代码实现事件委托：

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

我希望事件冒泡，以便当我单击

项目时，警报会显示 item ，然后另一个警报显示 list。但此代码仅给出带有 item 的警报。我该如何修改它以使事件冒泡？

原文

I am trying to implement event delegation with the following code:

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

I want the event to bubble so that, when I click on an <li> item, an alert shows item, and then another alert shows list. But this code only gives the alert with item. How can I modify it so that the event bubbles?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽梦忆笙歌 2025-01-09 11:26:40

事件回调只触发一次，但并不代表事件不会冒泡。仅当该元素侦听事件时才会执行回调。

如果您确实希望警报一直触发到祖先，请在回调中一一添加祖先的警报。您不必向所有祖先添加侦听器，这会导致消耗更多内存。

回复收藏 0 原文

余生再见 2025-01-09 11:26:40

您需要为列表添加事件来提醒它。事件由父对象捕获，但没有事件绑定到它们，因此它不会发出警报。您需要为所有对象添加事件来提醒它。

回复收藏 0 原文

冷︶言冷语的世界 2025-01-09 11:26:40

当您在 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 );

Live demo: http://jsfiddle.net/rCVfq/

When you bind a click handler at the document object, you can't expect it to be invoked multiple times. It will be invoked only once (at the document object).

Btw the event does bubble up the DOM tree. If it didn't, it wouldn't reach the document object, and you wouldn't see any alert box.

So, the event fires at the LI element, and then bubbles all the way up to the document object, where the click handler is invoked.

Btw usually you don't delegate all the way up to the document object, but to the closest common ancestor. For example, if you want to handle clicks on the LI elements, you delegate to the UL element:

var list = document.getElementsByClassName( 'list' )[0];    

list.addEventListener( 'click', function ( e ) {
    var item = e.target;

    // handle item click
}, false );

Live demo: http://jsfiddle.net/rCVfq/

回复收藏 0 原文

旧人哭 2025-01-09 11:26:40

我刚刚发布了一个小型事件委托库，以便更轻松地执行此类操作。在 http://craig.is/riding/gators 上查看

您可以这样做

Gator(document).on('click', 'li', function() { alert('li clicked!'); });
Gator(document).on('click', 'ul', function() { alert('ul clicked!'); });

这将绑定一个单击文档的处理程序并将相应地分派事件。

当您单击 li 时，它们都会触发，除非您停止传播。

I just released a small event delegation library to make it easier to do things like this. Check it out at http://craig.is/riding/gators

You can do

Gator(document).on('click', 'li', function() { alert('li clicked!'); });
Gator(document).on('click', 'ul', function() { alert('ul clicked!'); });

This will bind a single click handler to the document and will dispatch the events accordingly.

They will both fire when you click an li unless you stop propagation.

回复收藏 0 原文

薄凉少年不暖心 2025-01-09 11:26:40

您可以使用某种循环方法来调用这两个警报：

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

You can use some looping method to invoke both alerts:

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

回复收藏 0 原文

~没有更多了~