使用jQuery的事件委托功能（delegate）

最编程 2024-08-07 14:57:00

...

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

这种直接绑定#list li的写法，其实就是绑定了5次li标签。这样的多次绑定是比较消耗性能的。

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

这种写法是绑定#list节点，用于监听从子节点li的事件冒泡事件。这样只需要绑定父节点#list，既节省性能，也可以解决一个新增子节点的问题。

下面来写写示例，演示一下。

首先编写呈现绑定`#list li`的示例

当点击li标签的时候，则设置backgroundColor为red，如下：

这个示例有一个缺点，如果后面再创建一个li标签，那么此时这个新增的li标签就没有这个click()事件。

在`click()`事件后面创建一个`li`标签

如果需要在#list内部的最后加上一个li标签，可以使用append()方法。

因为这个最后第6个li标签是在绑定click()事件之后创建的，所以这种写法，怎么点击第6个li标签都不会触发click()事件。

改写使用事件委托的方式，则第6个`li`标签可以触发`click`事件

采用父节点#list使用事件委托的方法，可以绑定新增的click()节点事件。因为这个是利用事件冒泡的原来来实现的。如果点击#list下任何li，这样的话都会出现一个click()事件冒泡至#list，此时#list再进行处理即可。

示例完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#list li").click(function(){
            //  $(this).css({"backgroundColor":"red"});
            // })

            $("#list").delegate("li","click",function(){
                $(this).css({"backgroundColor":"red"});
            })

            var $li = $('<li>6</li>');

            $("#list").append($li);
        })
    </script>
    <style type="text/css">
        #list{
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- ul#list>li{$}*5 -->
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

上一篇：浅谈JavaScript的事件（事件委托）