jQuery事件委托

最新推荐文章于 2024-03-31 03:13:13 发布

weixin_30527551

最新推荐文章于 2024-03-31 03:13:13 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zwq-/p/10187210.html

版权

一、事件委托简介

1、什么是事件委托

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

2、为什么要用事件委托

　（1）考虑一个ul，在li的数量非常少的时候，为每一个li添加事件当然会使用for循环；但是数量多的时候这样做太浪费内存，长到上百上千上万的时候，为每个li添加事件就会对页面性能产生很大的影响。

　（2）给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

3、作用：

1.性能要好
2.针对新创建的元素，直接可以拥有事件

4、事件委托原理

事件委托就是利用事件冒泡原理实现的！

事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；

例：页面上有一个节点树，div > ul > li > a

比如给最里面的a 加一个click 事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div, 有这样一个机制，当我们给最外层的div 添加点击事件，那么里面的ul ， li ， a 做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父集代为执行事件；

二、使用场景

　　•为DOM中的很多元素绑定相同事件；
　　•为DOM中尚不存在的元素绑定事件；

实例：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

 $(function () {
        $("ul").on("click","li",function () {
            alert(1);
        })
    });

转载于:https://www.cnblogs.com/zwq-/p/10187210.html

weixin_30527551

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件委托

一、事件委托简介1、什么是事件委托事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。2、为什么要用事件委托　（1）考虑一个ul，在li的数量非常少的时候，为每一个li添...
复制链接

扫一扫