jQuery事件委派（delegate(s,[t],[d],fn)）

Tone@

于 2022-05-05 16:14:21 发布

阅读量654

点赞数 1

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/TongJ_/article/details/124591162

版权

jquery 学习 javascript

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaScript中的事件委托机制，通过将事件监听器添加到父元素，实现对子元素事件的处理。这种方式减少了事件监听器的数量，方便动态添加新元素并自动响应。文中给出了jQuery中设置和移除事件委托的示例代码，并展示了如何利用事件委托改变被点击li元素的背景色。

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

1. 事件委托:

* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理

* 监听回调是加在了父辈元素上

* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)

* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

2. 使用事件委托的好处

* 添加新的子元素, 自动有事件响应处理

* 减少事件监听的数量: n==>1

3. jQuery的事件委托API

* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)

* 移除事件委托: $(parentSelector).undelegate(eventName)

4.实例：

html：

  <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
  </ul>
  <br />
  <button id="btn1">添加新的li</button>
  <button id="btn2">删除ul上的事件委托的监听器</button>

jQuery：

    <script>
      //建立事件委派
      $("ul").delegate("li", "click", function () {
        this.style.background = "red";
      });

      //新增li
      $("#btn1").on("click", function () {
        $("<li>新增的li....</li>").appendTo($("ul"));
      });

      //点击取消事件委派
      $("#btn2").on("click", function () {
        $("ul").undelegate("click");
      });
    </script>