眼前的说话

  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('#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()方法用于拍卖只触发一样糟的风波

相关文章

网站地图xml地图