eventDelegate

发表于 | 分类于

事件委派

1 jQuery事件委派:可以理解为，本来应该下属做的事情，却由领导做了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
   $(function(){
        $("ul li").click(function(){
            console.log("click绑定程序");
        });
    });
    $(function(){
        $("ul").delegate("li","click",function(){
            console.log("delegate直接绑定执行程序");
        });
    });
</script>

以上两种绑定事件的方式所实现的效果是一样的，但是需要注意

第一种绑定方式 click

  • 1 很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。

    2 如果后期动态添加li，不会拥有这个弹出事件。

第二种绑定方式 delegate

  • 1 可以解决耗费资源的问题，只绑定给ul元素一个事件处理程序
  • 2 后期动态添加的子元素，也会拥有该事件处理程序