jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on()。

那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点。

  在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的;

  因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不如直接都采用on方法来的痛快和直接

  所以在新版的API中都这么写到:

    .on()方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理的所有功能

.bind() :没有事件委托机制。

.live() : 高版本的jQuery不支持.live()方法,所以该方法应该少使用。不支持链式调用。

.delegate : $( elements ).delegate( selector, events, data, handler );

.on : $( elements ).on( events, [selector], data, handler );

注意:

  .delegate 和 .on()的参数的顺序区别

总结:

  • 在下列情况下,应该使用.live()或.delegate(),而不能使用.bind():

    为DOM中的很多元素绑定相同事件;

    为DOM中尚不存在的元素绑定事件;

  • 用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
  • 不要再用.live()了,它已经不再被推荐了,而且还有许多问题
  • .delegate()会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上

我们可以用.on()来代替上述的3种方法

不足点也是有的:

  • 并非所有的事件都能冒泡,如load, change, submit, focus, blur
				
时间: 2024-12-09 12:59:43

jQuery中的事件绑定方法的相关文章

Jquery中的事件绑定$("#btn").bind("click",function(){ })

Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 因为每次都这么调用太麻烦,所以jquery就用$("#btn").click(function(){})来进行简化 Jquery中的事件绑定$("#btn").bind("click",function(){ })

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中

12JQuery笔记----------------------JQuery中的事件

1 1.(*)JQuery中的事件绑定: 2 $(“#btn”).bind(“click”,function(){}),每次都这么调用太麻烦, 3 所以jQuery可以用$(“#btn”).click(function(){})来进行简化.unbind 4 5 6 2. mouseover.mouseenter的区别:div里套div.见备注.和事件冒泡有关系. 7 8 9 3. (*)合成事件hover,hover(enterfn,leavefn),当鼠标放在元素上时调用enterfn方 10

JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获,以及DOM事件流.现在我们来看下,JQuery框架中的事件冒泡问题,以及如何阻止事件的传播行为. 1.JQuery中的事件绑定,都是属于事件冒泡. 这篇博客介绍了JQuery中绑定事件处理函数的几种方式,从中可以看到:这几种绑定方式,都不允许我们传递事件类型(是事件冒泡,还是事件捕获).而javascript原生提供的addEventListener()则允许我们设置事件的类型. <script> $(function(){

完美的jquery事件绑定方法on()

在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,用法如下: $("#info_table td").live("click",function(){/*显示更多信息*/}); 这里的.live()方法会把click事件绑定到$(document)对象,而且只需要给$(document)绑定一次,然后就能够处理后续动态加载的单元格的单击事件.在接收到任何事件时,$(document)

jQuery中的live绑定多个事件整理

在1.4.0之前(不包含1.4.0)无法使用多个绑定的,单个示例为: $('.clickme').live('click', function() { // Live handler called. }); 1.4.0-1.4.2开始支持了,实例如下: $('.hoverme').live('mouseover mouseout', function(event) { if (event.type == 'mouseover') { // do something on mouseover }

JQUERY事件绑定方法研究

阅读前,我认为你需要先知道以下几点基础知识: dom对象是树形结构的 dom中的事件会从触发事件的目标节点开始逐级向上冒泡 每当我们想给某个元素绑定事件的时候,第一个想到的方法是bind,我们就先来说说bind. bind的作用是给具体的某个元素绑定事件,比如 1 $('button').bind('click',function(){}); 给所有的button元素添加了点击事件处理方法.这似乎已经可以完成大部分的事件绑定任务了,然而有一个问题它无法解决–如果某一元素是新添加的怎么办?bind

jQuery事件绑定方法bind、 live、delegate和on的区别

我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1).DOM树 下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: 2).Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素)