资讯专栏INFORMATION COLUMN

深入理解JQuery中的on方法(事件委派机制)

ckllj / 1799人阅读

摘要:它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。替换是引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制

前言

在开发项目的时候,JQuery的使用极其广泛,如果脑海中没有一点JQuery的基础知识,随性编写,那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法,这个用得比较多,为此我特地做了个总结,有需要的伙伴们可以好好的看一下这篇文章。on方法是专门用来处理事件委派机制的,笼统的说就是解决在你Ajax或者Pjax之后事件无法绑定到新添加的元素上的问题的,很多JQuery中的bug问题也都出现在这。

需求分析

1、解决Ajax或者Pjax之后导致点击事件失效问题。

效果图

1、当初次点击checkbox时批量删除按钮可以正常显示出来,但是在Ajax或者Pjax之后就没法显示了。
1.1、显示

1.2、不显示

原先代码

1、直接input[name="selection[]"]点click绑定点击事件。
此时,初次点击checkbox时批量删除按钮可以正常显示出来,但是在Ajax或者Pjax之后就没法显示了。

/**
 * 批量删除 隐藏显示按钮
**/
    $("input[name="selection[]"]").click(function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeOut();
    }else{
        $("#remove-all").fadeIn();
    }
 });
    $("input[name="selection_all"]").click(function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeIn();
    }else{
        $("#remove-all").fadeOut();
    }
 });

 function has_selected(){
    var keys= new Array();
    var keys_str = "";
    $("input[name="selection[]"]:checked").each(function(){
         keys.push($(this).val());
    });
    keys_str = keys.join(",");
    return keys_str;
 }
修改后代码

1、使用on()通过将事件绑定到document。(其实这里也可以将document换成body或者其他Ajax或者Pjax之后输出页面之外的元素都行,document只是标准而已)
问题解决,在Ajax或者Pjax之后,点击checkbox批量删除按钮还能正常显示出来。

/**
 * 批量删除 隐藏显示按钮
**/
$(document).on("click", "input[name="selection[]"]", function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeOut();
    }else{
        $("#remove-all").fadeIn();
    }
 });
$(document).on("click", "input[name="selection_all"]", function(e) {
    keys_str = has_selected();
    if(keys_str == ""){
        $("#remove-all").fadeIn();
    }else{
        $("#remove-all").fadeOut();
    }
 });

 function has_selected(){
    var keys= new Array();
    var keys_str = "";
    $("input[name="selection[]"]:checked").each(function(){
         keys.push($(this).val());
    });
    keys_str = keys.join(",");
    return keys_str;
 }
分析总结

jQuery从1.7开始,引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()
当第二个参数"selector"为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的"selector"参数,所以on()可以非常方便的替换掉bind()。

替换live()
在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法
$("#list li").live("click", "#list li", function() {
//function code here.
});

on()写法
$(document).on("click", "#list li", function() {
//function code here.
});

这里的关键就是第二个参数"selector"在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()
delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。
delegate()的写法
$("#list").delegate("li", "click", function() {
//function code here.
});

on()写法
$("#list").on("click", "li", function() {
//function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

相关资料

深入理解jquery新的绑定事件机制on方法的使用
jQuery新的事件绑定机制on()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/21913.html

相关文章

  • 深入理解JQuery中的on方法事件委派机制

    摘要:它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。替换是引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制 前言 在开发项目的时候,JQuery的使用极其广泛,如果脑海中没有一点JQuery的基础知识,随性编写,那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法,这个...

    jindong 评论0 收藏0
  • 深入理解JQuery中的on方法事件委派机制

    摘要:它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。替换是引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制 前言 在开发项目的时候,JQuery的使用极其广泛,如果脑海中没有一点JQuery的基础知识,随性编写,那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法,这个...

    ralap 评论0 收藏0
  • 深入理解Java虚拟机05--虚拟机类加载机制

    摘要:我们甚至可以从网络或者其他的地方加载一个二进制流作为程序的一部分。对于任何一个类,我们通过类和这个类的加载器共同确定在中的唯一性,为了保证父类和子类的层次关系。一.前言  我们一定心里有个疑问,我们那个多态是怎么回事?我们指定的一个接口,却可以等到运行时可以对应于不同的实现类。这是因为,Java有个特性就是依赖运行期动态加载和动态连接,这样实现了Java可以动态进行扩展。我们甚至可以从网络或...

    yanbingyun1990 评论0 收藏0
  • 深入理解虚拟机之虚拟机类加载机制

    摘要:最终形成可以被虚拟机最直接使用的类型的过程就是虚拟机的类加载机制。即重写一个类加载器的方法验证验证是连接阶段的第一步,这一阶段的目的是为了确保文件的字节流中包含的信息符合当前虚拟机的要求,并且不会危害虚拟机自身的安全。 《深入理解Java虚拟机:JVM高级特性与最佳实践(第二版》读书笔记与常见相关面试题总结 本节常见面试题(推荐带着问题阅读,问题答案在文中都有提到): 简单说说类加载过...

    MadPecker 评论0 收藏0
  • 从一无所知到无所不知————jvm系列(1)

    摘要:学习能更深入的理解这门语言,能理解语言底层的执行过程,深入到字节码层次。 目录   前言 程序的运行 1.JVM类加载机制 ①一般在什么情况下会去加载一个类?也就是说,什么时候.class字节码文件中加载这个类到JVM内存里来? ②验证、准备、初始化 ③初始化 2.类加载器和双亲委派机制 ...

    Betta 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<