zoukankan      html  css  js  c++  java
  • 【转载】jquery为动态添加元素添加事件

    Event names and namespaces(事件名称和命名空间)

    http://www.css88.com/jqapi-1.9/on/

    任何事件的名称,可以作为events 参数。jQuery将通过所有浏览器的标准JavaScript事件类型,当用户操作事件,如click,浏览器会调用handler参数的函数。此外,.trigger()方法可以触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

    事件名称可以添加指定的event namespaces(命名空间) 来简化删除或触发事件。例如,"click.myPlugin.simple"为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理,可以用.off("click.myPlugin") 或 .off("click.simple")删除绑定到相应元素的Click事件处理程序,而不会干扰其他绑定在该元素上的“click(点击)” 事件。命名空间类似CSS类,因为它们是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字空间是供 jQuery 使用的。

    在.on()方法的第二种用法中,events参数是一个JavaScript对象或者键值对。键等同于events参数,用空格分隔的事件名称字符串和可选命名空间。每个键的值是一个函数(或false 的值),相当于 handler 参数,但是该值并不是方法中的最后一个参数。在其它方面,这两种形式在下面描述的内容中其行为都是相同的。如下所述。

    .bind(), .live(), 和 .delegate()之间的区别并不明显。但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug。

    基础 DOM树

    首先,图形化的HTML文档能帮助我们更好的理解。一个简单的HTML页面看起来应该像这样

    DOM tree sample

    事件冒泡(也称作事件传递)(Event bubbling aka event propagation)

    点击一个链接,触发绑定在链接元素上的 click 事件,进而触发绑定到这个元素的click事件的函数。

    ?

    1

    $('a').bind('click', function() { alert("That tickles!") });

      

    所以一次点击会触发一个alert。
    trigger the alert
    然后,这个 click 事件会从DOM树向上传递,传播到父元素,然后传递给每一个祖先元素。
    event propagates up the tree

    在DOM树中, document 是根节点。
    现在我们能容易的解释.bind(), .live(), 和 .delegate()之间的差别了

    .bind()

    ?

    1

    $('a').bind('click', function() { alert("That tickles!") });

      

    这是最直接的绑定方法。jQuery 扫描文档找到所有 $(‘a’) 元素,然后给每一个找到的元素的 click 事件绑定处理函数。

    .live()

    ?

    1

    $('a').live('click', function() { alert("That tickles!") });

      

      jQuery绑定处理函数到 $(document) 元素,并把 ‘click’ 和 ‘a’ 作为函数的参数。有事件冒泡到document节点的时候,检查这个事件是不是 click 事件,target element能不能匹配 ‘a’ css选择器,如果两个条件都是true,处理函数执行。

    live方法也可以绑定到指定的元素(或者说“上下文(context)”)而不用绑定到document,比如:

    ?

    1

    $('a', $('#container')[0]).live(...);

      

    .delegate()

    ?

    1

    $('#container').delegate('a', 'click', function() { alert("That tickles!") });

      

    jQuery扫描文档找到 $(‘#container’),绑定处理函数到他的 click 事件,’a’ css选择器作为函数的参数。当有事件冒泡到 $(‘#container’),检查事件是不是 click,并检查target element是不是匹配css选择器,如果两者都符合,执行函数。

    注意这次和 .live() 方法很相似,除了把事件绑定到特定元素与跟元素的区别。精明的JS’er 或许会总结成 $(‘a’).live() == $(document).delegate(‘a’),真的是这样吗? 不,不全是。

    为什么 .delegate() 比 .live() 好

    jQuery 的 delegate方法比 live 方法更应该成为首选有一个原因。考虑以下的场景:

    ?

    1

    2

    3

    $('a').live('click', function() { blah() });

    // or

    $(document).delegate('a', 'click', function() { blah() });

      

    速度

    上面第二个执行比第一个快,因为第一个会遍历整个文档查找 $(‘a’) 元素,并保存为jQuery对象,但是live方法只需要传一个字符串参数’a'而已,$() 方法并不知道我们会用链式表达式在后面用上.live()。

    delegate 方法就只需要找到并存贮 $(document)元素就够了。

    有一种hack是在 $(document).ready()之外调用live方法,这样就会立即执行。这时候DOM还没有填充,也就不会查找元素或创建jQuery对象。

    灵活性和链式语法

    这方面live方法依然令人费解。想一下,它链在$(‘a’)对象,但实际上是在$(document)对象起作用。因为这个原因,在链式表达式中使用live让人很不安,我觉得live方法变成一个全局的jQuery方法 $.live(‘a’,…) 会更有意义。

    只支持css选择器

    最后,live方法有一个最大的缺点,只能用css选择器,用起来很不方便。

    有关css选择器的缺点,参看 Exploring jQuery .live() and .die()

    原作者更新

    为什么使用 .live() 或 .delegate() 而不用 .bind()

    最后,bind 方法看起来更清晰,更直接,是吗?但是这里有两个原因我们推荐 delegate 或 live:

    • 绑定事件处理函数到还不存在DOM中的元素。 bind 方法直接绑定函数到每个单独的元素,不能绑定到还没有添加到页面里的元素,如果你写了$(‘a’).bind(…),然后用ajax给页面增加了新的链接,新添加的链接不会绑定事件。live 或 delegate 或者其它绑定到祖先元素的事件,让现在有的元素,或者以后增的元素都可以使用。
    • 绑定处理函数到一个元素或者少数几个元素,监听后代元素,而不是绑定100个相同的处理函数到单独的元素。这样更有性能优势。

    阻止冒泡

    最后注意一下事件冒泡。通常我们能用这样的方法阻止其他处理函数:

    ?

    1

    2

    3

    4

    5

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

    e.preventDefault();

    //or

    e.stopPropagation();

    })

      其实关于live被删除的事件早就在1.7.2版本以后就有通知过了 不过在官方一直提倡使用.on代替.live的过程中 .live事件一直沿用

    今天更新了 看下jQuery1.9的相关信息 发现api中完全的删除掉了.live事件

    我猜肯定有人关于.on事件 并没有以前.live事件那么好用 甚至有的时候绑定不上事件

    其实关于这个答案是这样的, .on事件不同于以往的.live和.bind事件使用方法:

    $('selecter').live('click', function(){ // do something... });

    而转到.on事件应该这样:

    $(document).on('click', 'selecter', function(){ // do something... });

    而.on事件可以完全代替以往的.bind, .delegate等事件

    // Bind
    $( "#members li a" ).on( "click", function( e ) {} );
    $( "#members li a" ).bind( "click", function( e ) {} );

    // Live
    $( document ).on( "click", "#members li a", function( e ) {} );
    $( "#members li a" ).live( "click", function( e ) {} );

    // Delegate
    $( "#members" ).on( "click", "li a", function( e ) {} );
    $( "#members" ).delegate( "li a", "click", function( e ) {} );

    但是在这里,用 live 或 delegate 方法绑定的事件会一直传递到事件真正绑定的地方才会执行。这时其他的函数已经执行过了。

    以前我们定义事件,比如为元素定义单击事件是这样写的:

    代码如下:

    $('input').click(function () {
    //处理代码
    });

    代码如下:

    $('.clickme').bind('click', function() {
    // Bound handler called.
    });

    但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数,它并不能将事件也复制(到目前为止我还不清楚它是为什么这样定义,是没法复制还是刻意这么处理,以防止出现某些异常,这还有待去分析一下jquery的源代码)。
    现在,使用live你可以轻松搞定,

    $('.clickme').live('click', function() { // Live handler called. });这样,你即使在后面动态插入的元素,也会被绑定事件,$('body').append('<div class="clickme">Another target</div>');
    定义和用法
    live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

    问题:使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍。

    解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。

    Js代码
    //先通过die()方法解除,再通过live()绑定
    $("#selectAll").die().live("click",function(){
    //事件运行代码
    });
    //先通过die()方法解除,再通过live()绑定
    $("#selectAll").die().live("click",function(){
    //事件运行代码
    });die()方法简介:

    Js代码
    die([type], [fn])<SPAN style="WHITE-SPACE: normal"> </SPAN>

    die([type], [fn])

    概述
    jQuery 1.3新增。此方法与live正好完全相反。

    如果不带参数,则所有绑定的live事件都会被移除。

    你可以解除用live注册的自定义事件。

    如果提供了type参数,那么会移除对应的live事件。

    如果也指定了第二个参数function,则只移出指定的事件处理函数。

  • 相关阅读:
    4G DTU是什么 4G DTU有什么功能
    模拟量转485采集模块是什么
    vue详情页回到列表页定位到之前位置(keep-alive)
    vue插槽
    elementUI给table表头加CheckBox
    $attrs和$listeners
    parseTime-格式化时间
    localStorage设置过期时间
    前端埋点
    将接口数据通过递归过滤
  • 原文地址:https://www.cnblogs.com/zhanghai/p/4461161.html
Copyright © 2011-2022 走看看