JS与Jquery的事件委托

最新推荐文章于 2022-08-27 13:34:27 发布

转载最新推荐文章于 2022-08-27 13:34:27 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lixiaoyan/blog/883755

文章标签：

#javascript #python #ViewUI

本文详细解释了事件委托的概念、原理及其应用场景，并通过具体的代码示例展示了如何使用jQuery的delegate()方法及最新的on()方法来实现事件委托，提高网页性能。

2019独角兽企业重金招聘Python工程师标准>>>

概念：

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。　　举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理：

利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：

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

事件源 :

跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景：

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

Jquery的事件委托

$(function(){ 
    $('#ul1,#ul2').delegate('li','click',function(){ 
        if(!$(this).attr('s')) { 
        $(this).css('background','red'); 
        $(this).attr('s',true); 
        }else { 
            $(this).css('background','#fff'); 
            $(this).removeAttr('s'); 
        } 
    }) 
});

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素

最新on()方法取替了delegate()方法

$(function(){ 
        $('#ul1,#ul2').on('click','li',function(){ 
                if(!$(this).attr('s')) { 
                $(this).css('background','red'); 
                $(this).attr('s',true); 
                }else { 
                        $(this).css('background','#fff'); 
                        $(this).removeAttr('s'); 
                } 
        }) 
});

转载于:https://my.oschina.net/lixiaoyan/blog/883755