深入理解jQuery事件绑定机制

对于只需要触发一次,随后就立即解绑的情况,jQuery提供了一种方法,one(),语法结构与bind相同。

trigger(“click”)可以简化成click()。trigger还可以可以触发自定义名称的事件。例如,先用bind(“myClick”,function(){})给元素绑定一个自定义的myClick事件,然后用trigger(“myClick”)就可以触发该事件。

$("button").one("click",function(){

console.log("one");

//$("input").trigger("focus");

//既会触发input上绑定的onfus事件,如下,又会触发浏览器默认操作,即将焦点移到input上。

$("input").triggerHandler("focus");

//只会触发input上绑定的onfus事件,不会执行浏览器默认操作。

})

$("input").focus(function(){

console.log("input");

})

$("div").bind("mouseover mouseout",function(){

//绑定多个事件

$(this).toggleClass("color");

})

//在绑定的事件名称后面添加命名空间,便于统一管理

$(‘div‘).bind("click.plugin",function(){

console.log(‘click has a name!‘);

})

$(‘div‘).bind("mouseover.plugin",function(){

console.log(‘mouseover div‘);

})

$(‘div‘).bind("click",function(){

console.log(‘click has not a name!’);

})

$("button").click(function(){

$("div").unbind(".plugin");

})

$("button").eq(1).click(function(){

$("div").trigger("click!");

//感叹号的意思是匹配所有不在命名规范下的click事件

})

时间: 2024-08-11 05:36:42

深入理解jQuery事件绑定机制的相关文章

关于jQuery新的事件绑定机制on()的使用技巧

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

jQuery新的事件绑定机制on()

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

jQuery新的事件绑定机制on()示例应用

投稿:whsnow 字体:[增加 减小] 类型:转载 从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQue

d3可视化实战04:事件绑定机制

首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑定的语法,与jquery等其他类库用起来区别不大,都是object.on( event, listener )的形式.但是在具体实践中,我们经常会遇到给同一个对象绑定多个事件监听器的问题.这里就原生js.jquery和d3分别进行讨论. 一.原生JS的事件绑定 在探讨这个问题之前,我们首先需要看一下

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

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

深入学习jQuery事件绑定

× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对这四种事件处理程序进行了兼容处理,以更简单的方式就可以实现事件绑定.本文将详细介绍jQuery事件绑定 bind() bind()方法为一个元素绑定事件处理程序,有以下3种使用方法 bind(eventType[,eventData],handler(eventObject)) bind()方法可以

关于jQuery事件绑定

转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> &l

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

jQuery事件绑定on()、bind()、live()与delegate() 方法详解

jQuery事件绑定有四个方法,对应为on,off,bind,unbind,delegate,undelegate,live,die 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置:但是live(),on(),delegate()均支持未来新添加元素的事件设置: 2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以 用来代替live()函数,live()函