zoukankan      html  css  js  c++  java
  • Jquery中的事件委托bind,live,delegate,on的区别

    bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

    bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

    live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些。

    on()方法绑定事件可以提升效率

    on()方法可以绑定动态添加到页面元素的事件

    bind:把事件绑定到每一个匹配的元素上,主要特点

    1、兼容性好

    2、只能给已经添加的元素绑定事件,不能给未来存在的元素绑定

    3、当元素很多时,会出现效率问题

    事件委托:

    live:是用事件委托的概念来执行,但是是把事件委托给document,主要特点:

    1、事件只需要绑定一次,不需要绑定到筛选出来的元素上。

    2、动态添加元素后依然有绑定事件。

    3、不能使用event.stopPropagation()来阻止事件冒泡

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    $('li').live('click',function(ev){
        var target=ev.target||ev.srcElement;
        alert(target.innerText);
    })

    delegate:将事件绑定到指定的父元素上,和live类似,但比较灵活。主要特点是:

    1、可以用在动态添加的元素上

    2、绑定的父元素可以采用就近原则,减少查询次数。

    3、在live和delegate两者中推荐使用后者。

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    $('ul').delegate('li','click',function(ev){
        var target=ev.target||ev.srcElement;
        alert(target.innerText);
    })
  • 相关阅读:
    XML节点处理
    Log4Net使用记录
    WPF选择文件夹及文件操作
    SQL 一些语句记录
    一篇MSSQL事务的测试文章
    游标示例
    WPF实现多线程加载数据
    MS SQL索引学习
    Entity Framework 利用 Database.SqlQuery<T> 执行存储过程,并返回Output参数值
    手持移动端特殊链接:打电话,发短信,发邮件
  • 原文地址:https://www.cnblogs.com/xiaoan0705/p/8619143.html
Copyright © 2011-2022 走看看