jQuery 高级事件

jQuery 不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用。比如模拟用户触发事件、事件委托事件、和统一整合的 on off,以及仅执行一次的 one 法。这些方法大大降低了开发者难度,提升了开发者的开发体验。

一.模拟操作

在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击

//点击按钮事件
$(‘input‘).click(function(){
    alert(‘我的第一次点击来自模拟!‘);
});  

//模拟用户点击行为
$(‘input‘).trigger(‘click‘);  

//可以合并两个方法
$(‘input‘).click(function(){
    alert(‘我的第一次点击来自模拟!‘);
}).trigger(‘click‘);
有时在模拟用户行为的时候,我们需要给事件执行传递参数,这个参数类似与 event.data 的额外数据,可以可以是数字、字符串、数组、对象。

$(‘input‘).click(function(e,data1,data2){
    alert(data1+‘,‘+data2);
}).trigger(‘click‘,[‘abc‘,‘123‘]);

  

注意:当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含 起来。但不能认为是数组形式,下面给出一个复杂的说明。

$(‘input‘).click(function(e,data1,data2){
    alert(data1.a+‘,‘ +data2[1]);
}).trigger(‘click‘,[{‘a‘ :‘1‘,‘b‘:‘2‘},[‘123‘,‘456‘]]);

  

除了通过 JavaScript 事件名触发,也可以通过自定义的事件触发,所谓自定义事件其实 就是一个被.bind()绑定的任意函数。

$(‘input‘).bind(‘myEvent‘,function(){
    alert(‘自定义事件!‘);
}).trigger(‘myEvent‘);

  

.trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个 空的同名事件即可。

$(‘input‘).click(function(){
    alert(‘我的第一次点击来自模拟!‘);
}).click(); //空的 click()执行的是 trigger()

  

这种便捷的方法,jQuery 几乎个所有常用的事件都提供了。

jQuery 还提供了另外一个模拟用户行为的方法:.triggerHandler();这个方法的使用 和.trigger()方法一样。

$(‘input‘).click(function(){
    alert(‘我的第一次点击来自模拟!‘);
}).triggerHandler(‘click‘);

  

在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参数。但在某些特殊情况下,就产生了差异: 
1..triggerHandler()方法并不会触发事件的默认行为,而.trigger()会。

$(‘form‘).trigger(‘submit‘); //模拟用户执行提交,并跳转到执行页面  

$(‘form‘).triggerHandler(‘submit‘); //模拟用户执行提交,并阻止的默认行为

  如果我们希望使用.trigger()来模拟用户提交,并且阻止事件的默认行为,则需要这么写:

$(‘form‘).submit(function(e){
    e.preventDefault(); //阻止默认行为
}).trigger(‘submit‘);

  

2..triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。

3..triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回 undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。

alert($(‘input‘).click(function(){
    return  123;
}).triggerHandler(‘click‘)); //返回 123,没有 return 返回

  

4..trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是 jQuery 扩展于 DOM 的机制,并非 DOM 特性。而.triggerHandler()不会冒泡。

var index=1;
$(‘div‘).bind(‘myEvent‘,function(){
    alert(‘自定义事件‘+index);
    index++;
});
$(‘.div3‘).trigger("myEvent");

  

三.事件委托

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
  <div class="clickme">Click here</div>
</body>

  

可以给这个元素绑定一个简单的click事件:

$(‘.clickme‘).bind(‘click‘, function() {
  alert("Bound handler called.");
});

  

当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

$(‘body‘).append(‘<div class="clickme">Another target</div>‘);

  

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$(‘.clickme‘).live(‘click‘, function() {
  alert("Live handler called.");
});

  

然后再添加一个新元素:

$(‘body‘).append(‘<div class="clickme">Another target</div>‘);

  

然后再点击新增的元素,他依然能够触发事件处理函数。

什么是事件委托?用现实中的理解就是:有 100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。 而在 jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素) 上,然后再进行相关处理即可。

如果一个企业级应用做报表处理,表格有 2000 行,每一行都有一个按钮处理。如果用之前的.bind()处理,那么就需要绑定 2000 个事件,就好比 2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会发生各种意外。这种情况放到页面上也是一样,可能导致页面 极度变慢或直接异常。而且,2000 个按钮使用 ajax 分页的话,.bind()方法无法动态绑定尚未存在的元素。就好比,新转学的学生,快递员无法验证他的身份,就可能收不到快递。

//HTML 部分
<div style="background:red;width:200px;height:200px;" id="box">
    <input type="button" value="按钮" class="button"/>
</div>  

//使用.bind()不具备动态绑定功能,只有点击原始按钮才能生成
$(‘.button‘).bind(‘click‘, function(){
    $(this).clone().appendTo(‘#box‘);
}); 

//使用.live()具备动态绑定功能,jQuery1.3 使用,jQuery1.7 之后废弃,jQuery1.9 删除
$(‘.button‘).live(‘click‘,function(){
    $(this).clone().appendTo(‘#box‘);
});

  

.live()原理就是把 click 事件绑定到祖先元素$(document)上,而只需要给$(document)绑定一次即可,而非 2000 次。然后就可以处理后续动态加载的按钮的单击事件。

在接受任何事件时,$(document)对象都会检查事件类型(event.type)和事件目标(event.target),如果 click 事件是.button,那么就执行委托给它的处理程序。.live()方法已经被删除,无法使用了。需要测试使用的话,需要引入向下兼容插件。

//.live()无法使用链接连缀调用,因为参数的特性导致
$(‘#box‘).children(0).live(‘click‘, function(){
    $(this).clone().appendTo(‘#box‘);
});

  

在上面的例子中,我们使用了.clone()克隆。其实如果想把事件行为复制过来,我们只 需要传递 true 即可:.clone(true)。这样也能实现类似事件委托的功能,但原理却截然不同。

一个是复制事件行为,一个是事件委托。而在非克隆操作下,此类功能只能使用事件委托。

$(‘.button‘).live(‘click‘,function(){
    $(‘<input type="button" value="复制的" class="button"/>‘).appendTo(‘#box‘);
});

  

当我们需要停止事件委托的时候,可以使用.die()来取消掉。 $(‘.button‘).die(‘click‘); 由于.live()和.die()在 jQuery1.4.3 版本中废弃了,之后推出语义清晰、减少冒泡传播层次、 又支持链接连缀调用方式的方法:.delegate()和.undelegate()。但这个方法在 jQuery1.7 版本中 被.on()方法整合替代了。 $(‘#box‘).delegate(‘.button‘,‘click‘,function(){ $(this).clone().appendTo(‘#box‘); }); $(‘#box‘).undelegate(‘.button‘,‘click‘); //支持连缀调用方式 $(‘div‘).first().delegate(‘.button‘, ‘click‘,function(){ $(this).clone().appendTo(‘div:first‘); }); 注意:.delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方 式,第三个参数是执行函数。和.bind()方法一样,可以传递额外参数。.undelegate()和.unbind() 方法一样可以直接删除所有事件,比如:.undelegate(‘click‘)。也可以删除命名空间的事件, 比如:.undelegate(‘click.abc‘)。 注意:.live()和.delegate()和.bind()方法一样都是事件绑定,那么区别也很明显,用途上 遵循两个规则:1.在 DOM 中很多元素绑定相同事件时;2.在 DOM 中尚不存在即将生成的 元素绑定事件时;我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定。

时间: 2024-10-21 07:42:08

jQuery 高级事件的相关文章

jQuery 高级事件(模拟操作)

一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击 //点击按钮事件 $('input').click(function(){ alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('input').click(function(){ alert('我的第一次点击来自模拟!'); }).trigger('

jQuery高级事件

学习要点: 1.模拟操作 2.命名空间 3.事件委托 on.off和one 一.模拟操作 1.trigger 方法 <div style="width:200px;height:200px;background:red;"> <input type="button" value="点击"/> </div> $("input").click(function () { console.log(

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp

高级事件(一)

jQuery不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用.比如模拟用户触发事件.事件委托事件.和统一整合的on和off,以及仅执行一次的one方法.这些方法大大降低了开发者难度,提升了开发者的开发体验. 模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. html(部分)代码: <input type="button" value="按钮" /> jQ

jQuery基础——事件篇

jQuery基础--事件篇 鼠标事件 click与dbclick事件 click方法监听用户单击操作,dbclick监听用户双击操作,这两个方法类似. dbclick与click事件不同的是: click事件触发需要以下几点: click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 dblclick事件触发需要以下几点: dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发 鼠标指针在元素里

python前端jQuery高级

知识点预习1.jQuery事件冒泡2.事件委托 3.元素节点操作 4.正则表达式及表单验证实例 01- submit事件 //监听 提交的事件 $("form").submit(function (abc) { //阻止系统的默认行为 // abc.preventDefault(); return false; }) 事件冒泡的原理在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件

jquery高级编程学习

jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof object === "number" Boolean typeof object === "boolean" Object typeof object === "object" Element object.nodeType null object =

jQuery.load()事件使用方法详解

jQuery.load()是ajax中一种异步加载的事件,我们可以加载整个页面并且也可以带参数加载,下面我来详细介绍jQuery.load()事件用法,希望对初学者有所帮助. .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) 返回: jQuery 描述: 载入远程 HTML 文件代码并插入至 DOM 中.version added: 1.0.load( url, [ data ], [ c

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =