• jQuery 高级事件(事件委托)


    这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

    <body>

    <div class="clickme">Click here</div>

    </body>

    可以给这个元素绑定一个简单的click事件:

    $('.clickme').bind('click', function() {

    alert("Bound handler called.");

    });

    当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

    $('body').append('<div class="clickme">Another target</div>');

    尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

    .live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

    $('.clickme').live('click', function() {

    alert("Live handler called.");

    });

    然后再添加一个新元素:

    $('body').append('<div class="clickme">Another target</div>');

    然后再点击新增的元素,他依然能够触发事件处理函数。

    什么是事件委托?用现实中的理解就是:有 100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。 而在 jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素) 上,然后再进行相关处理即可。

    如果一个企业级应用做报表处理,表格有 2000 行,每一行都有一个按钮处理。如果用之前的.bind()处理,那么就需要绑定 2000 个事件,就好比 2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会发生各种意外。这种情况放到页面上也是一样,可能导致页面 极度变慢或直接异常。而且,2000 个按钮使用 ajax 分页的话,.bind()方法无法动态绑定尚未存在的元素。就好比,新转学的学生,快递员无法验证他的身份,就可能收不到快递。

    //HTML 部分

    <div style="background:red;200px;height:200px;" id="box">

    <input type="button" value="按钮" class="button"/>

    </div>

    //使用.bind()不具备动态绑定功能,只有点击原始按钮才能生成

    $('.button').bind('click', function(){

    $(this).clone().appendTo('#box');

    });

    //使用.live()具备动态绑定功能,jQuery1.3 使用,jQuery1.7 之后废弃,jQuery1.9 删除

    $('.button').live('click',function(){

    $(this).clone().appendTo('#box');

    });

    .live()原理就是把 click 事件绑定到祖先元素$(document)上,而只需要给$(document)绑定一次即可,而非 2000 次。然后就可以处理后续动态加载的按钮的单击事件。

    在接受任何事件时,$(document)对象都会检查事件类型(event.type)和事件目标(event.target),如果 click 事件是.button,那么就执行委托给它的处理程序。.live()方法已经被删除,无法使用了。需要测试使用的话,需要引入向下兼容插件。

    //.live()无法使用链接连缀调用,因为参数的特性导致

    $('#box').children(0).live('click', function(){

    $(this).clone().appendTo('#box');

    });

    在上面的例子中,我们使用了.clone()克隆。其实如果想把事件行为复制过来,我们只 需要传递 true 即可:`.clone(true)`。这样也能实现类似事件委托的功能,但原理却截然不同。

    一个是复制事件行为,一个是事件委托。而在非克隆操作下,此类功能只能使用事件委托。

    $('.button').live('click',function(){

    $('<input type="button" value="复制的" class="button"/>').appendTo('#box');

    });

    当我们需要停止事件委托的时候,可以使用.die()来取消掉。

    $('.button').die('click');

    由于.live()和.die()在 jQuery1.4.3 版本中废弃了,之后推出语义清晰、减少冒泡传播层次、 又支持链接连缀调用方式的方法:`.delegate()和.undelegate()`。但这个方法在 jQuery1.7 版本中 被.on()方法整合替代了。 


    $('#box').delegate('.button','click',function(){

    $(this).clone().appendTo('#box');

    });

    $('#box').undelegate('.button','click');//支持连缀调用方式 

    $('div').first().delegate('.button', 'click',function(){

    $(this).clone().appendTo('div:first');

    });

    注意:.delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方 式,第三个参数是执行函数。和.bind()方法一样,可以传递额外参数。.undelegate()和.unbind() 方法一样可以直接删除所有事件,比如:.undelegate('click')。也可以删除命名空间的事件, 比如:

    `.undelegate('click.abc')。`

    注意:.live()和.delegate()和.bind()方法一样都是事件绑定,那么区别也很明显,用途上 遵循两个规则:1.在 DOM 中很多元素绑定相同事件时;2.在 DOM 中尚不存在即将生成的 元素绑定事件时;我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定。

  • 相关阅读:
    关于Maya Viewport 2.0 API 开发的介绍视频
    春节大假
    Some tips about the life cycle of Maya thread pool
    Can I compile and run Dx11Shader for Maya 2015 on my side?
    How to get current deformed vertex positions in MoBu?
    想加入全球首届的 欧特克云加速计划吗?
    三本毕业(非科班),四次阿里巴巴面试,终拿 offer(大厂面经)
    mac、window版编辑器 webstorm 2016... 永久破解方法。
    node 搭载本地代理,处理web本地开发跨域问题
    js 一维数组,转成嵌套数组
  • 原文地址:https://www.cnblogs.com/No-nonsense/p/5076704.html
Copyright © 2020-2023  润新知