深入学习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()方法可以接受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表示一个包含一个或多个用空格隔开的J事件类型的字符串，比如"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>
时间： 2024-10-20 01:03:15

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

html学习 - jquery事件监听详解

html学习 - jquery事件监听详解 html学习 - jquery事件监听详解 监听方法 监听方法参数解释 click参数 事件自动执行问题解决 bind方法 live方法 监听方法 在jquery里,监听的方法比较多,用的最多的就是简单的.click() .onchange() .pressdown() 所以这样很简单啊,直接使用就好了,只要符合参数规范就可以了.除了这个还有bind() live() 方法. 而addEventListener()同bind()方法是没有很大功能上的区

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

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()函

jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() 复制代码代

jquery 事件绑定案例

效果图公如下 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv

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

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

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

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

4.Knockout.Js官网学习（事件绑定）

前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h2>ClickBind</h2> <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="

深入学习jQuery事件对象

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.jQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各个浏览器下都可以正常运行而不需要进行浏览器类型判断,本文将详细介绍jQuery事件对象 获取 对于DOM事件对象来说,标准浏览器和IE8-