深入学习jQuery事件绑定
Posted 小火柴的蓝色理想
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入学习jQuery事件绑定相关的知识，希望对你有一定的参考价值。
前面的话
javascript有HTML、DOM0级、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(\'原生js如何绑定a连接点击事件？