jQuery事件处理器的绑定及解除方法

  前几天用bind()方法做事件绑定的时候发现还有其他几种事件绑定的方法,查阅了之后对比总结一下。内容详情请点链接~欢迎讨论拍砖~

.bind()

  .bind(eventType [, eventData], handler)    v1.0

  给被选元素绑定一个事件处理程序。eventType为事件类型如"click","submit","mousedown"等; eventData为传给handler的数据(注意变量作用域); handler为事件发生时运行的函数。通过 .unbind(eventType [, handler]) 解除绑定。

  .bind({eventType:handler,eventType:handler,...})

  给被选元素绑定多个事件处理程序。当然,如果是不同事件触发同一函数,我们可以这样:

1 $(“#foo”).bind("mouseenter mouseleave", function(){
2     //do something
3 });

  .bind(eventType [, eventData][, preventBubble])    v1.4.3

  preventBubble参数默认值为true,如果设为false就相当于处理函数为: function(){ return false; } ,相当于调用preventDefault()和stopPropagation()。这个函数可以通过 .unbind(eventType,false) 解除绑定。

 .live()   v1.7弃用  v1.9移除

  .live(events, handler)    v1.3

  .live(events[, data], handler)    v1.4

  .live(events)     v1.4.3

  给被选元素绑定一个或多个事件处理程序。通过 .die(eventType[, handler]) 解除绑定。与.bind()最显著的区别是:该方法的被选元素可以是当前及未来的元素(比如由脚本创建的新元素)。

  新版本中不建议使用该方法,是因为可能会出现一些问题:

  • 调用该方法时,jQuery试图检索被选择到的具体元素,在大文件中这是比较耗时的;
  • 不支持jQuery的一个很不错的优点-链式调用,如$("a").find(".offsite, .external" ).live( ... );;
  • 由于所有.live()方法实际上都是绑定在document元素上的,处理函数在执行前会有较为复杂的过程:只要有事件冒泡到document节点上,它就查看该事件是否是匹配的事件,以及该事件的目标元素与被选元素是否匹配,如果都是的话,则执行函数。也因此可以看出该方法与.bind()的另一个区别:该方法要冒泡到实际绑定的元素上时才执行处理函数,而.bind()直接执行;
  • 在IOS的移动设备上,大多元素的click事件不会冒泡到body,在应用到某些特定情形时才可以使用;
  • 在document子元素上调用.stopPropogation()无效,因为事件已经传播至document;
  • 其他方法有时会对该方法产生意想不到的影响,如$(document).off("click"); 会解除所有live()方法的绑定;

  官方建议是,v1.7+使用.on(),旧版本使用.delegate()。

.delegate()

  .delegate(selector,eventType[, eventData], handler)    v1.4.2

   .delegate(selector,events)    v1.4.3

  给被选元素的子元素(即参数selector选中的元素)绑定一个或多个事件处理程序。该方法的被选元素也可以是未来元素。通过 .undelegate(selector,eventType[, handler]) 解除绑定。

  该方法和.live()很相似,区别就在于:该方法把事件委托给了父元素,使得对元素的查询可以更便捷,内存消耗更小。如:

1 $(‘document‘).delegate(‘a‘,‘click‘,function(){
2     //do something
3 });
4 $(‘a‘).live(‘click‘,function(){
5     //do something
6 });

  从这个例子中看,虽然都是绑定到了document元素,但后者会先查询所有a元素并存储为jquery对象,再去进行后面的冒泡等步骤。

.on()

  .on(events[, selector][, data], handler)    v1.7

  .on(events[, selector][, data])    v1.7

  .bind(), .live(), .delegate()其实都是通过.on()实现的,通过.off()解除绑定,.unbind(), .die(), .undelegate(),也都是通过.off()来实现的。

.one()

  .one(events[, selector][, data][,handler])    v1.7

  给被选元素绑定一个或多个事件处理程序,但只能运行一次处理函数。其他和.on()相同。



  一些特定事件处理器可以直接绑定到元素,如‘click‘,‘hover‘,‘mouseenter‘,‘mouseleave‘,‘focus‘,‘blur‘,‘load‘,‘scroll‘和‘error‘等(要注意是否冒泡),直接绑定更加方便,当然也降低了灵活性。

  jQuery的API文档中,关于Event Handler Attachment(事件处理器的绑定)还有其他部分:jQuery.proxy(), .trigger(), .triggerHandler(),在此先按住不表,以后用到再来做总结。

时间: 2024-10-06 04:54:02

jQuery事件处理器的绑定及解除方法的相关文章

jQuery 事件注册和绑定及this与event.target的区别浅析

最近小码哥,在研究学习nodejs以及相关框架webpack.express.reactjs等等,为了将来,为了RMB,小码哥牢记自我充电,以备不时之需. 在学习reactjs的时候,在前辈ruanyifeng的博文里看到了一个以前没怎么注意的知识点.是与this和event.target之间的区别有关的.当时感觉就蒙了,发现event.target貌似印象不深啊,,瞬间小码哥开启了奔跑模式,,, 各种baidu,各种Chrome biying等等,发现区分不难,就是比较细致.不细分析,有点晕!

jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件

Jquery在处理事件的时候有时候会遇到预想不到的结果 如下 <a id="link_foo">Foo</a> <script type="text/javascript">     function bindFooClick(){       $("#link_foo").click(function(){         console.log("www.vincentguo.cn");

第77天:jQuery事件绑定触发

一.元素操作 1. 高度和宽度 $("div").height(); // 高度 $("div").width(); // 宽度 .height()方法和.css("height")的区别: 返回值不同,.height()方法返回的是 数字类型(20),.css("height")返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候 2.坐标值 $("div").offset(

彻底弄懂jQuery事件原理二

上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类 \ 先放个图,这其实就是整个事件流程的过程: 1. add方法: add: function(elem, types, handler, data, selector) { var handleObjIn, eventHandle, tmp, events, t, handleObj, special, hand

jQuery事件对象

1.event.currentTarget 事件的监听者2.event.target 事件的目标3.event.delegateTarget 绑定了当前正在调用jQuery事件处理器的(当前事件的委托者)4.event.pageX 鼠标相对于文档左边缘的位置5.event.pageY 鼠标相对于文档上边缘的位置6.event.type 获取当前的事件类型7.event.preventDefault() 阻止默认事件8.event.stopPropagation() 阻止冒泡事件

关于vue.js中事件处理器的练习

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件处理器</title></head><body> <!-- 监听事件 --> <!-- 可以用v-on监听DOM事件触发js --> <div id="app-1">

jQuery绑定以及解除时间方法总结,以及事件触发的方法

 一   off()和on()          $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数          off() 方法移除用.on()绑定的事件处理程序,如$("p").off("click","");   二  die()和live()        $("obj").live(type,[date],fn),$(&

jquery bind 方法一个特点(绑定多个方法到一个dom的某个事件)

目录: [TOC] jquery bind方法介绍 方法声明:bind(type,[data],fn) 方法说明:为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数.这个事件处理函数会通过参数方式接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为.如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false. 技巧:多数情况下,可以把事件处理器函数定义为匿名函数. 参数意义 type (String) : 事件类型. data (Object) : (可选

jQuery事件绑定的四种方法

jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品.该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库. 参数: event:必需