• 技术文章 >web前端 >前端问答

    jquery事件代理的意思是什么

    长期闲置长期闲置2022-06-17 17:11:23原创308

    在jquery中,事件代理的意思是把事件绑定到父级元素,等待事件通过DOM冒泡到该元素时再执行的行为;事件代理就是利用事件冒泡的原理把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,可以极大减少事件绑定次数,提高性能。

    本教程操作环境:windows10系统、jquery3.6.0版本、Dell G3电脑。

    jquery事件代理的意思是什么

    在jQuery中,事件代理是指:把事件绑定到父级元素,然后等待事件通过DOM冒泡到该元素时再执行。

    事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

    在事件侦听过程中有两种触发事件的方式:事件捕获和事件冒泡。事件冒泡更快,效率更高。

    事件捕获:事件在DOM中向后代元素下沉。

    事件冒泡:事件从发生事件的源元素通过DOM向上冒泡。

    jQuery使用事件冒泡的方式处理所有的事件。jQuery库提供了3个方法来绑定元素的事件处理函数,分别是bind()、live()、delegate()。

    1、使用.bind()绑定事件处理函数:必须提供两个参数,第一个是事件类型,第二个是事件处理函数。

    .bind(event type,event handle)

    如:

    $(document).ready(function(){
      $(".selector").bind("click",alertMe);
    function alertMe(){
      alert("Hello world!");
    }
    });

    .bind()方法仅适用于为DOM中已经存在的元素绑定事件处理函数。对于后来通过操作脚本时添加的DOM元素,则不起作用。

    设想:在DOM中有一个.box元素,你希望某个链接在每次被单机时复制这个元素,并把它添加到DOM中。首先,我们可以为这个链接绑定一个适当的click事件处理函数。每单击这个链接一次,.clone()方法就会调用一次,复制box元素并把它追加到相应的容器中:

    $(document).ready(function(){
        $('.box').bind('click',function(){
            $(this).clone().appendTo('.container');        
        });
    });
    <div class="container">
        <div class="box">click me</div>
    </div>

    在浏览器运行,结果是单击这个链接,会追加元素。但是单击除了第一个链接的元素时,并不会执行click事件。

    因此:绑定的click事件不能作用于这些刚刚被添加到DOM中的新元素。只有绑定事件那一刻DOM中存在的元素才会成功绑定click事件。click事件仅仅被绑定到第一个元素上,因此虽然能不断克隆第一个元素,而被克隆出来的这些元素却没有一个能够受click事件影响。如果想这个克隆出来的元素能够受click事件影响,可以使用.live()绑定。

    2、使用.live()绑定事件处理函数

    .live()方法提供了一种相当灵活地捕获事件的方式。它的用法与.bind()极为相似。唯一不同点是.live()方法不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素。

    .live(event type,event handle)

    修改上面的例子:

    $(document).ready(function(){
        $('.box').live('click',function(){
            $(this).clone().appendTo('.container');        
        });
    });
    <div class="container">
        <div class="box">click me</div>
    </div>

    3、使用.delegate()绑定事件处理函数

    .delegate(selector,event type,event handler)

    修改以上例子:

    <script type="text/javascript">
      
      $(document).ready(function(){
            $('.container').delegate('.box','click',function(){
                $(this).clone().appendTo('.container:first');        
            });
        });    
      </script>
      <body>
        <div class="container">
            <div class="box">click me</div>
        </div>
        <div class="container">
            <div class="box">click me</div>
        </div>
        <div class="container">
            <div class="box">click me</div>
        </div>
      </body>

    于用.live()绑定事件处理函数执行效果一样。但是用.delegate()绑定事件处理函数要比用.live()效率更高。jQuery库有关绑定的部分源码

    bind: function( types, data, fn ) {
            return this.on( types, null, data, fn );
        },
        unbind: function( types, fn ) {
            return this.off( types, null, fn );
        },
        live: function( types, data, fn ) {
            alert(this.context); //添加一行
            jQuery( this.context ).on( types, this.selector, data, fn );
            return this;
        },
        die: function( types, fn ) {
            jQuery( this.context ).off( types, this.selector || "**", fn );
            return this;
        },
        delegate: function( selector, types, data, fn ) {
            alert(this); //添加一行
            return this.on( types, selector, data, fn );
        },
        undelegate: function( selector, types, fn ) {
            // ( namespace ) or ( selector, types [, fn] )
            return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
        },

    分别在live和delegate方法内增加了一行,浏览器运行后,使用.live(),弹出是document,也就是说用.live()绑定事件,它的源头是document。使用.delegate(),弹出的是object,也就是说用.delegate()绑定事件,它的源头是具体绑定的元素。因此,使用.delegate()要比使用.live()效率更高。

    从源码可以看出,用.bind()绑定事件处理函数,可以使用unbind()取消事件绑定。

            用.live()绑定事件处理函数,可以使用die()取消事件绑定。

            用.delegate()绑定事件处理函数,可以使用undelegate()取消事件绑定。

    视频教程推荐:jQuery视频教程

    以上就是jquery事件代理的意思是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jQuery
    上一篇:jquery中event是什么意思 下一篇:html5中web储存的含义是什么
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery中axios和ajax有什么区别• Jquery怎么把json转为对象• jquery怎么取消双击事件监听• jquery怎么给text文本框设置只读状态• jquery.parsejson转义怎么用
    1/1

    PHP中文网