jQuery中on方法使用注意事项详解

on(eventType,[childSelector],[data],fn)

采用事件委托机制绑定事件，好处是子元素动态加入时无需再次绑定。

on方法可以传入childSelector指定添加事件处理函数的具体子元素，还可以传入对象格式的数据data，fn函数内部通过event.data.XXX获取具体参数。传入事件处理函数的data需要在事件绑定时就确定好，不同于trigger('eventType',[data])，tirgger方法中传入的data（对象或数组形式）是事件发生时才计算的值。

如果同一个事件处理程序被多次绑定给同一个元素，触发时就会执行多遍。所以绑定之前，需要先解绑之前的相同事件:

$(“selector”).off("click.xxx").on('click.xxx',function(){…});

如要在同一个元素上绑定不同事件处理函数，可以用事件的命名空间加以区分：click.forSpan、click.forDiv。

delegate()的源码是调用on()方法,只不过参数顺序变了，所以统一用on()。

事件触发顺序：

target是触发事件的元素，不会变;currentTarget是事件处理函数当前所在的元素，会动态变化;delegateTarget是事件处理函数绑定的对象，不会变。

on方法利用了事件冒泡机制，事件会从事件源一直冒泡传递到document，并触发相应元素的事件处理函数（若有）。

事件处理队列：从触发事件的元素开始，遍历至delegateTarget，查找childSelector所指定的元素节点，并在事件处理队列handlerQueue中压入事件处理函数，最后将delegateTarget元素直接绑定的事件处理也压入队列（委托事件先于直接绑定的）。

on方法的冒泡过程中，具有事件处理函数的是delegateTarget元素而不是childSelector元素。

$("div").on('click','span',function(event){
 　　alert("The span element was clicked.");
 });
 $("p").click(function(event){
 　　alert("The p element was clicked.");
 });
 $("div").click(function(){
 　　alert("The div element was clicked.");
 });

点击span元素时，span元素上没有绑定事件处理函数，冒泡传递到P元素，P元素有直接绑定的事件处理函数，最先弹出P；然后传递到最外层div元素，div元素有事件委托，jQuery会从target (span)遍历到delegateTarget (div)，查找childSelector节点，并压入事件处理队列中。最后压入delegateTarget (div)元素直接绑定的事件处理函数。所以会弹出Span后弹出Div。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jquery新的绑定事件机制on方法的使用方法

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔的

  • jQuery on方法传递参数示例

    教你如何给 jQuery on方法绑定的函数传递参数,代码如下: 复制代码 代码如下: $(".loadingFlower").on("click",'',{name:"123",id:"234",tel:"345"},callback)   function callback(event){    console.log(event.data.name);    //参数1 =>123    con

  • jquery中的on方法使用介绍

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>

  • Jquery on方法绑定事件后执行多次的实现方法

    Jquery on方法绑定事件后执行多次的实现方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • JQuery中使用on方法绑定hover事件实例

    文本教你用on方法,模拟hover方法. 代码如下: 复制代码 代码如下: $(obj).on("mouseover mouseout",function(event){  if(event.type == "mouseover"){   //鼠标悬浮  }else if(event.type == "mouseout"){   //鼠标离开  } }) 赶紧去试试吧~

  • jQuery中on方法使用注意事项详解

    jQuery中on方法使用注意事项详解

    on(eventType,[childSelector],[data],fn) 采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定. on方法可以传入childSelector指定添加事件处理函数的具体子元素,还可以传入对象格式的数据data,fn函数内部通过event.data.XXX获取具体参数.传入事件处理函数的data需要在事件绑定时就确定好,不同于trigger('eventType',[data]),tirgger方法中传入的data(对象或数组形式)是事件发生时才计算的值

  • jquery中done和then的区别(详解)

    jquery的deferred对象的done方法和then方法都能实现链式调用,但是他们的作用是有区别的,then方法中如果你传递的方法有返回值,那么他会传递给下一个链式调用的方法.而done方法与此相反,你传递的方法就算有返回值,done方法也不会把你的返回值传给下一个链式调用的方法的, 话不多说,直接上实例: var defer = jQuery.Deferred(); defer.done(function(a,b){ console.log("a = " + a+"b

  • jquery中的ajax同步和异步详解

    之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除. 而异步则这个AJAX代码运行中的时候其他代码一样可以运行. jquery的async:false,这个属性 默认是true:异步,false:同步. $.ajax({ type: "post", url: "

  • jquery 中toggle的2种用法详解(推荐)

    一.在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发), 如下实例: <input id="btntest" type="button" value="点一下我" /> <div>我是动态显示的</div> <script type="

  • AndroidStudio中重载方法@Override的使用详解

    在我们使用Android Studio时,创建一个类是继承于Android中已有的类时,我们会对原有类中的方法进行重载,Android Studio为我们提供了快捷的插入重载的方法,便于开发.减轻了工作量. 当我们继承一个Android中已有的类时,需要对其函数进行重载只需要点击菜单栏 Code->Override Methods,会跳出可以重载的函数,寻找需要的函数即可. 其中重载函数前都会有@Override标志. public MyService extends Service{ @Ove

  • jQuery中extend函数的实现原理详解

    jQuery中extend函数的实现原理详解

    extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如上篇文章中讲到的noConflict方法,就是用extend方法来扩展的. 在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样.来看一下官方API对

  • jQuery的Read()方法代替原生JS详解

    在jQuery 3.0的版本前, ready经典用法是用一个匿名函数,像这样: $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0 ready() 变化 在jQuery 3.0发布之前,有以下几种方法称之为ready方法: 在document元素上操作: $(document).ready(handler); 在空元素上操作: $().ready(handler); 或者直接(即不在一个具体的

  • JAVA中static方法的用法实例详解

    本文实例讲述了JAVA中static方法的用法.分享给大家供大家参考,具体如下: static表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何对象.也就是说,它不依赖类特定的实例,被类的所有实例共享.只要这个类被加载,Java虚拟机就能根据类名在运行时数据区或者方法区内找到他们.因此,static对象可以在它的任何对象创建之前访

  • String中intern方法的使用场景详解

    在讲intern方法前,我们先简单回顾下Java中常量池的分类. 常量池的分类# Java中常量池可以分为Class常量池.运行时常量池和字符串常量池. 1. Class文件常量池 在Class文件中除了有类的版本.字段.方法.接口等描述信息外,还有一项信息是常量池(Constant Pool Table),用于存放编译期生成的各种字面量和符号引用. 所谓字面量类似与我们平常说的常量,主要包括以下两种 文本字符串,例如String a = "aa".其中"aa"就是

  • jQuery中$.ajax()和$.getJson()同步处理详解

    一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操作,那么获取不到当前异步操作返回的结果,js会继续执行下一条语句,所以我们需要同步操作请求获取后台返回数据结果后,判断结果是否符合再执行js下一条语句. 二.$.ajax()参数解释 url: 发送请求的地址. type: 请求方式(post或get)默认为get. timeout: 要求为Numb

随机推荐