[jQuery教程]jQuery自定义事件(十四)
前面章介绍的 mousedown、click、keydown 等类型的事件都是浏览器提供的,本章介绍如何自定义事件,更灵活的实现相应效果。
jQuery 自定义事件之 trigger 事件
众所周知类似于 mousedown、click、keydown 等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发。
在 jQuery 通过 on 方法绑定一个原生事件:
$('#elem').on('click', function() { alert("触发系统事件") });
alert 需要执行的条件:必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢? 正常来说是不可以的,但是 jQuery 解决了这个问题,提供了一个 trigger 方法来触发浏览器事件
所以我们可以这样:
$('#elem').trigger('click');
在绑定 on 的事件元素上,通过 trigger 方法就可以调用到 alert 了,挺简单!
再来看看.trigger 是什么?
简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger 除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数。
$('#elem').on('Aaron', function(event,arg1,arg2) { alert("自触自定义时间") }); $('#elem').trigger('Aaron',['参数 1','参数 2'])
trigger 触发浏览器事件与自定义事件区别?
- 自定义事件对象,是 jQuery 模拟原生实现的
- 自定义事件可以传递参数
jQuery 自定义事件之 triggerHandler 事件
trigger 事件还有一个特性:会在 DOM 树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回 false 或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
trigger 事件是具有触发原生与自定义能力的,但是存在一个不可避免的问题: 事件对象 event 无法完美的实现,毕竟一个是浏览器给的,一个是自己模拟的。尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替
triggerHandler 与 trigger 的用法是一样的,重点看不同之处:
- triggerHandler 不会触发浏览器的默认行为,.triggerHandler( “submit” )将不会调用表单上的.submit();
- .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素;
- 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理;
- 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined。
码云笔记 » [jQuery教程]jQuery自定义事件(十四)