菜鸟教程
教程 jquery tutorial

事件委托

事件委托是利用事件冒泡机制，将事件绑定到父元素上，从而管理其子元素的事件，适合动态添加元素的场景。

事件委托优点

  • 减少事件处理函数数量，提高性能
  • 支持对未来动态添加的子元素绑定事件
  • 简化代码结构，方便管理

事件委托实现方法

使用 .on() 方法的委托形式：

js 
// 给父元素绑定事件，第二个参数是子元素选择器
$("#parent").on("click", ".child", function () {
  alert("点击了子元素：" + $(this).text());
});

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    // 事件委托，父元素处理子元素点击事件
    $("#list").on("click", "li", function () {
      alert("你点击了：" + $(this).text());
    });

// 动态添加新元素
$(&quot;#addItem&quot;).click(function () {
  $(&quot;#list&quot;).append(&quot;&lt;li&gt;新项&lt;/li&gt;&quot;);
});



});
</script>


<ul id="list">
<li>项1</li>
<li>项2</li>
</ul>
<button id="addItem">添加新项</button>

相关内容