jQuery 学习笔记事件委派

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_30736301

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xviubu/p/3463953.html

本文通过实例解析事件委派的概念，演示如何利用事件传播特性解决网页中元素动态添加后的事件响应问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件委派允许我们将事件绑定到一个元素包括它匹配的子元素（无论存在的还是不存在的）。

我们通过一个例子来感受一下事件委派

<div id="container">
        <ul id="list">
             <li><a href="http://domain1.com">Item #1</a></li>
             <li><a href="eventDemo.html">Item #2</a></li>
             <li><a href="nothispath.html">Item #3</a></li>
             <li><a href="http://domain4.com">Item #4</a></li>
        </ul>
    </div>

然后我们将click事件直接绑定到a元素

$( "#list a" ).on( "click", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

现在一切都运行良好，但是我们添加一个元素后

$("#list").append(' <li><a href="http://domain1.com">Item #5</a></li>');

然后再点击新添加的元素，会执行默认的行为（跳到另一个链接）。

如果我们也想要匹配新增的元素该怎么办？这里就用到了事件委派，事件委派主要的原理就是利用了事件传播

事件传播

什么是事件传播？

如上面的例子，当我们点击a元素后，事件会沿着<a> <li> <ul #list> <div #container> <body><html>传到document root，

当点击到绑定事件的元素后，就相当于点击了整个页面，这就叫做event bubbling 或者event propagation.

要实现上面的功能只需将a元素移到on里面就可以了

$( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

这就是所谓的event delegation，利用事件委派的最佳实践就是将事件绑定到将来可能产生的元素。

转载于:https://www.cnblogs.com/xviubu/p/3463953.html

jQuery 学习笔记 事件委派

事件传播

jQuery 学习笔记事件委派