前面的话

  javascript有HTMLDOM0级DOM2级IE这四种事件处理程序,而jQuery对这四种事件处理程序进行了兼容处理,以更简单的方式就可以实现事件绑定。本文将详细介绍jQuery事件绑定

bind()

  bind()方法为一个元素绑定事件处理程序,有以下3种使用方法

bind(eventType[,eventData],handler(eventObject))

  bind()方法可以接受3个参数:第一个参数是一个或多个事件类型的字符串,或自定义事件的名称;第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象;第三个参数是用来绑定的事件处理函数 

<style>
.entered{background-color:lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').bind('mouseenter mouseleave', {msg:'123'},function(event) {
$(this).toggleClass('entered');
alert(event.data.msg)
});
</script>

一般用法

  一般地,我们用bind()方法为元素绑定一个事件处理函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').bind('click',function(){
alert(1);
});
</script>

简化用法

  jQuery库提供了标准的事件类型绑定快捷方法,比如bind('click')的快捷方法click()

  每一种类型都可以找到它的快捷方式

blur,focus,focusin,focusout,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
alert(1);
});
</script>

命名空间

  如果eventType参数字符串包含一个点(.),那么该事件是带命名空间的。这个点(.)将事件及其命名空间分隔开来。例如,在调用.bind('click.name', handler) ,字符串click是事件类型,而字符串name是命名空间。命名空间允许我们解除或绑定一些事件,而不会影响其他事件

  [注意]即使是同类型的事件,命名空间不同,就不会受到影响

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').bind('click.a',function(){alert(1);})
$('#btn').bind('click.b',function(){alert(2);})
$('#btn').mouseout(function(){$(this).unbind('.b')})
</script>

bind(eventType[,eventData],preventBubble)

  bind()方法的第二种用法是第三个参数设置为false,用于防止默认事件,阻止事件冒泡。默认值是true  

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').bind('contextmenu',false);
</script>

bind(events)

  bind()的第三种用法是只有一个参数,该参数是一个对象,包含一个或多个DOM事件类型和函数并执行它们 

<style>
.entered{background-color:lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').bind({
click: function() {
alert(1);
},
mouseenter: function() {
$(this).toggleClass('entered');
},
mouseleave: function(){
$(this).toggleClass('entered');
}
});
</script>

【unbind()】

  unbind()是bind()事件的对应事件,从元素上删除一个以前附加的事件处理程序。每个用bind()方法绑定的事件处理程序可以使用unbind()移除

  若unbind()方法没有任何参数,可以删除元素上所有绑定的处理程序

<style>
.entered{background-color:lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<button id="reset">删除事件</button>
<script>
$('#btn').bind({
click: function() {
alert(1);
},
mouseenter: function() {
$(this).toggleClass('entered');
},
mouseleave: function(){
$(this).toggleClass('entered');
}
});
$('#reset').click(function(){
$('#btn').unbind();
})
</script>

  unbind()方法可以接收一个表示事件类型的字符串,表示删除该类事件类型的所有处理函数

<style>
.entered{background-color:lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<button id="reset">删除事件</button>
<script>
$('#btn').bind({
click: function() {
alert(1);
},
mouseenter: function() {
$(this).toggleClass('entered');
},
mouseleave: function(){
$(this).toggleClass('entered');
}
});
$('#reset').click(function(){
$('#btn').unbind('click');
})
</script>

  unbind()方法也可以接受两个参数,第一个参数表示事件类型,第二个参数表示事件处理程序,表示删除该事件类型的该事件处理程序

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<button id="reset">删除事件</button>
<script>
function handler(){
alert(1);
}
$('#btn').bind('click',handler);
$('#btn').bind('click',function(){alert(2);});
$('#reset').click(function(){
$('#btn').unbind('click',handler);
})
</script>

  [注意]如下用法是无法正常工作的。尽管两个匿名函数的内容是一样的,但是它们是在不同的地方被创建的。因此,javascript会将它们当成是不同的函数对象。若要解除绑定特定的事件处理函数,需要的是指向该函数的引用,而不是内容相同的不同函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<button id="reset">删除事件</button>
<script>
$('#btn').click(function(){
alert(1);
})
$('#reset').click(function(){
$('#btn').unbind('click',function(){alert(1);});
})
</script>

命名空间

$( "#foo" ).bind( "click.myEvents", handler );

  上面的click事件可以以正常的方式解除:

$( "#foo" ).unbind( "click" );

  但是,如果要避免影响其他处理程序,可以更具体

$( "#foo" ).unbind( "click.myEvents" );

  也可以解除命名空间中所有的处理程序,无论是什么事件类型

$( "#foo" ).unbind( ".myEvents" );

事件对象

  当解除自身内部处理程序时可以给unbind()方法传递event对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
var timesClicked = 0;
$( "#btn" ).bind( "click", function( event ) {
alert(++timesClicked);
if (timesClicked >= 2 ) {
$(this).unbind(event);
}
});
$('#btn').click(function(){alert('a')});
</script>

trigger()

  trigger()方法用来完成模拟操作,根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

trigger(eventType[,extraParameters])

  trigger()方法接受两个参数eventType和extraParameters。eventType表示事件类型,而extraParameters是可选参数,表示传递给事件处理程序的额外数组参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">模拟按钮</button>
<script>
$('#btn1').click(function(){
alert(1);
})
$('#btn2').click(function(){
$('#btn1').trigger('click');
})
</script>

  也可以直接用简化写法click()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">模拟按钮</button>
<script>
$('#btn1').click(function(){
alert(1);
})
$('#btn2').click(function(){
$('#btn1').click();
})
</script>

  可以使用on()方法定义一个自定义事件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').on('custom',function(event,param1,param2){
alert(param1 + '\n' + param2);
});
$('#btn').click(function(){
$('#btn').trigger('custom',['1','2']);
})
</script>

  [注意]传入的extraParameters参数与传入到bind()方法中的eventData参数是不同的。它们的机制都是向事件处理函数中传入信息,但是传入trigger()中的extraParameters参数是在事件发生时传入的,而传入到bind()中的eventData参数要求在进行事件绑定时就要事先计算好

trigger(event)

  trigger()方法的另一种使用方法是传入一个event对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
var event = jQuery.Event("click");
event.user = "false";
$(document).trigger(event);
return false;
})
$(document).click(function(event){
alert(event.user)
})
</script>

【triggerHandler()】

  triggerHandler()方法的行为与trigger()相似,不同之处有如下几点:

  1、triggerHandler()方法并不会触发事件的默认行为

  2、trigger()会影响所有与jQuery对象相匹配的元素,而triggerHandler()仅影响第一个匹配到的元素

  3、使用triggerHandler()创建的事件,并不会在DOM树中向上冒泡。如果事件没有被目标元素直接处理,那么它就不会进行任何处理

  4、与普通的方法返回jQuery对象相反,triggerHandler()返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回undefined

triggerHandler(eventType[,extraParameters])

  triggerHandler()方法接受两个参数eventType和extraParameters。eventType表示事件类型,而extraParameters是可选参数,表示传递给事件处理程序的额外数组参数

  如果使用trigger()触发focus事件,那么它不只触发绑定了该事件的处理函数,也会触发浏览器默认行为,即获得焦点

  如果使用triggerHandler()触发focus事件,那么它只会触发绑定了该事件的处理函数,而浏览器的默认focus动作是不会被触发的

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="test">
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$('#test').focus(function(){
$(this).val(1);
})
$('#btn1').click(function(){
$('#test').trigger('focus');
})
$('#btn2').click(function(){
$('#test').triggerHandler('focus');
})
</script>

delegate()

  delegate()方法为所有匹配选择器的元素绑定一个或多个事件处理函数,基于指定元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素

delegate(selector,eventType,eventData,handler(eventObject))

  delegate()方法包含4个参数:selector表示选择器字符串,用于过滤器触发事件的元素;eventType表示一个包含一个或多个用空格隔开的事件类型的字符串,比如"click"或"keydown"或自定义事件的名称;eventData表示一个对象,它包含的数据键值对映射将被传递给事件处理程序;handler(eventObject)表示事件触发时执行的函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('body').delegate('#btn','click',{a:1},function(event){
alert(event.data.a)
});
</script>

delegate(selector,events)

  delegate()方法的另一种用法是传递两个参数,selector参数表示选择器字符串,用于过滤器触发事件的元素;而events对象包含一个或多个DOM事件类型和函数  

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('body').delegate('#btn',{
'click':function(){alert(1)},
'mouseover':function(){$(this).css('background','lightblue')},
'mouseout':function(){$(this).css('background','transparent')}
});
</script>

【undelegate()】

  undelegate()方法用于删除当前选择器匹配的所有元素的事件处理程序

1、 解除绑定所有事件

undelegate()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">解绑事件</button>
<script>
$('body').delegate('#btn1','click',{a:1},function(event){
alert(event.data.a)
});
$('#btn2').click(function(){
$('body').undelegate();
})
</script>

2、解除某一类型事件

undelegate(eventType)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">解绑事件</button>
<script>
$('body').delegate('#btn1',{
'click':function(){alert(1)},
'mouseover':function(){$(this).css('background','lightblue')},
'mouseout':function(){$(this).css('background','transparent')}
});
$('#btn2').click(function(){
$('body').undelegate('click');
})
</script>

3、解除特定元素的事件

undelegate(selector,eventType)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">解绑事件</button>
<script>
$('body').delegate('#btn1',{
'click':function(){alert(1)},
'mouseover':function(){$(this).css('background','lightblue')},
'mouseout':function(){$(this).css('background','transparent')}
});
$('#btn2').click(function(){
$('body').undelegate('#btn1','click');
})
</script>

4、解除特定元素绑定的对象函数的特定类型的事件

undelegate(selector,eventType,handler(eventObject))

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">解绑事件</button>
<script>
var handler = function(){
alert(1);
}
$('body').delegate('#btn1','click',handler);
$('#btn2').click(function(){
$('body').undelegate('#btn1','click',handler);
})
</script>

on()

  on()方法是bind()方法和delegate()方法的升级版

on(events[,selector][,data],handler(eventObject))

  on()方法接受4个参数

  第一个参数event表示一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click","keydown.myPlugin",或者".myPlugin"

  第二个参数selector是可选参数,表示一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是null或者忽略了该选择器,那么被选中的元素总是能触发事件

  第三个参数data是可选参数,表示当一个事件被触发时,要传递给事件处理函数的event.data

  第四个参数handler表示事件被触发时,执行的函数。若该函数只是执行return false,那么该参数位置可以直接简写成 false

1、bind()写法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('body').on('click',{a:1},function(event){
alert(event.data.a)
});
</script>

2、delegate()写法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('body').on('click','#btn',{a:1},function(event){
alert(event.data.a)
});
</script>

on(events[,selector][,data]) 

  on()方法的另一种用法可以接受三个参数

  第一个参数event表示一个对象,键是由一个或多个由空格分隔的事件类型及可选的名字空间,值是这些事件类型所对应的事件处理函数

  第二个参数selector和第三个参数data与上一种用法一样,都是可选参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').on({
'click':function(){alert(1)},
'mouseover':function(){$(this).css('background','lightblue')},
'mouseout':function(){$(this).css('background','transparent')}
});
</script>

  on()方法的最后一个参数不是函数,而是false时,表示取消默认事件并取消事件冒泡

$("#btn").on("click", false)

  只取消默认事件

$("#btn").on("click", function(event) {
event.preventDefault();
});

  只取消冒泡

$("#btn").on("click", function(event) {
event.stopPropagation();
});

【off()】

  off()方法是on()方法对应的解绑事件的方法

1、移除所有事件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$('#btn1').on('click',{a:1},function(event){
alert(event.data.a)
});
$('#btn2').on('click',function(){
$('#btn1').off();
});
</script>

2、移除特定类型的事件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$('#btn1').on('click mouseover',{a:1},function(event){
alert(event.data.a)
});
$('#btn2').on('click',function(){
$('#btn1').off('click');
});
</script>

3、移除先前绑定的事件处理函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
function handler(){
alert(1);
}
$('#btn1').on('click',handler);
$('#btn2').on('click',function(){
$('#btn1').off('click',handler);
});
</script>

one()

  对于只需要触发一次,随后就要立即解除绑定的情况,jQuery提供了一种简写方法——one()方法。one方法可以为元素绑定处理函数,当处理函数触发一次后,立即被删除。即在每个对象上,事件处理函数只会被执行一次

  one()方法的结构与on()方法类似,使用方法也相同

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('body').one('click','#btn',{a:1},function(event){
alert(event.data.a)
});
</script>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<script>
$('#btn').one({
'click':function(){alert(1)},
'mouseover':function(){$(this).css('background','lightblue')},
'mouseout':function(){$(this).css('background','transparent')}
});
</script>

总结

  bind()方法类似于原生javascript的addEventListener()方法,用于绑定事件;trigger()方法类似于原生javascript的dispatchEvent()方法,用于触发事件;delegate()方法则是事件绑定的升级版,利用事件代理,提高性能及降低代码复杂度;on()方法是bind()方法和delegate()方法的升级版,将两个方法的功能结合了起来;one()方法用于处理只触发一次的事件

深入学习jQuery事件绑定的更多相关文章

  1. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  2. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  3. JQuery事件绑定,bind与on区别

    jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...

  4. jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate ...

  5. JQuery学习:事件绑定&入口函数&样式控制

    1.基础语法学习: 1.事件绑定 2.入口函数 3.样式控制 <!DOCTYPE html> <html lang="en"> <head> & ...

  6. jquery 学习(六) - 事件绑定

    HTML <!--绑定事件--> <div class="a1"> <button class="bt">按钮</bu ...

  7. JS学习笔记-事件绑定

    一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写.这样的方式无疑造成了改动以及扩展的问题,已经非常少使用了. 脚本模型是将事件处理函数写到js文件里, ...

  8. jquery事件绑定方式总结(补充)

    总结 : 1.简单事件绑定方式:事件名()  如:click() 2.高级事件绑定方式:bind(事件名,数据参数,function)    3.动态生成元素事件绑定方式:live(事件名,数据参数, ...

  9. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

随机推荐

  1. class写法[tip]

    <!DOCTYPE html> <html> <head> <title>test</title> <style type=" ...

  2. HDU 2222  AC自动机模板题

    1.HDU 2222 2.题意:给出n个单词,一个字串,求有多少个单词在字串里出现了.注意给出的单词可能会重复,重复的不计. 3.总结:入门题.在查询这里还是不太懂. #include<bits ...

  3. Python 爬虫1——爬虫简述

    Python除了可以用来开发Python Web之后,其实还可以用来编写一些爬虫小工具,可能还有人不知道什么是爬虫的. 一.爬虫的定义: 爬虫——网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区 ...

  4. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  5. java记录

    1. 包装类与自动装箱问题:在justjavac的博客上看到翻译的一篇文章 离开java,寻找更佳语言的十大理由 中关于自动装箱的一个描述: 这个特性是为了解决因原生类型的存在所导致的问题,在Java ...

  6. 【OAuth2.0】Spring Security OAuth2.0篇之初识

    不吐不快 因为项目需求开始接触OAuth2.0授权协议.断断续续接触了有两周左右的时间.不得不吐槽的,依然是自己的学习习惯问题,总是着急想了解一切,习惯性地钻牛角尖去理解小的细节,而不是从宏观上去掌握 ...

  7. Mac环境下Octopress个人博客搭建

    一直想弄一个漂亮一点的个人博客,之前一直用的博客园,对主页的能自定义内容实在不满意,终于下定决定,找到了Octopress这个适合我的解决方案,以下过程都是自己一步一步记录下来的,希望对大家有帮助. ...

  8. Python之路第一课Day4--随堂笔记(迭代生成装饰器)

    上节回顾: 1.集合 a.关系测试 b.去重 2.文件操作及编码 3.函数 4.局部变量和全局变量 上节回顾 本节课内容: 1.迭代器生成器 2.装饰器 3.json pickle数据序列化 4.软件 ...

  9. ASP.net之策略模式

    设计思路: 用ASP.net设计,调用策略模式.在第一个数和第二个数的文本框中输入数值,单击录题按钮,数值保存在n1,n2文档中,把要做的题都保存完后,单击开始按钮,开始做题,做完单击判断按钮,进行判 ...

  10. Java演算法之快速排序法

    1 * 快速排序法(Quick Sort),遞迴版本. 2 * 3 * @param array 傳入要排序的陣列 4 * @param start 傳入要排序的開始位置 5 * @param end ...