[jQuery教程]jQuery自定义事件(十四)

[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。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [jQuery教程]jQuery自定义事件(十四)

发表回复