jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与triggerHandler()比较。分享给大家供大家参考,具体如下:
前言:
最近在工作中做需求时发现了一个诡异的事情,在使用jQuery触发事件时,并不总是先执行默认行为,再执行绑定的事件行为,有时候可能是相反的顺序。于是上网查找了下资料,还真有个外国哥们和我遇到同一个问题!整理下笔记先~~
默认行为执行顺序
一般来说,浏览器执行事件的顺序是:先执行默认行为再执行绑定的行为。
可是在jquery中有些时候会出现相反的顺序,先执行绑定的行为,再执行默认行为。
那这里说的“有些时候”到底是什么时候呢?
看下面的代码示例:
jQueryTriggerandDefaultBehaviorDemo //WhentheDOMisready,initialize. $(function(){ $("input").click( function(objEvent){ //Alertthecheckboxedstatus. alert(this.checked); } ); $("button").click( function(objEvent){ //Triggerclickonthecheckbox. $("input").click(); } ); }); jQueryTriggerandDefaultBehaviorDemo
说明:页面中有2个元素,一个是input元素,一个是button元素,并分别绑定了click事件。当直接点击input元素时,alert结果为true,input的默认行为是在绑定的click事件之前发生的;当点击button元素时,alert结果却变成了false,input的默认行为是在绑定的click事件之后发生的;
细细体会其中的差别,发现当调用JQuery的$(selector).click()或者$(selector).trigger('click')来触发selector元素的click事件时,默认行为会在绑定的click事件之后发生。
那么如果我们希望,任何情况下默认行为都在绑定的click事件之前发生怎么做呢?
最简单的方法就是在触发input元素的click事件之前,手动设置checkbox的checked属性,然后通过triggerHandler()来触发click事件(不触发浏览器的默认行为)。代码如下所示:
$("input").click( function(objEvent){ //Alertthecheckboxedstatus. alert(this.checked); } ); $("button").click( function(objEvent){ //Togglecheckboxcheckedstatus. $("input")[0].checked=!$("input")[0].checked; //TriggerONLYclickeventhanldersonthecheckbox. $("input").triggerHandler("click"); } );
jQuery中trigger()与triggerHandler()区别
共同点:
-
都能触发通过jquery绑定的事件处理函数,如.on()/.bind()/.click(function(){})这些方式;
-
都能触发原生元素对象上的on{eventType}绑定的事件处理函数;
不同点:
-
triggerHandler(‘event')不会触发原生元素对象上的.event()方法(这种事件叫nativeevent),而trigger(‘event')则会;
浏览器的默认行为其实是执行了原生元素对象上的.event()方法!!! -
.triggerHandler()只会触发第一个匹配的元素上的事件,而trigger()会触发所有匹配元素的事件;
-
.triggerHandler()触发的事件不会冒泡,而trigger()会冒泡;
-
.triggerHandler()返回值可以是任意值,如果没有明确return值,则为undefined,而.trigger()永远返回jQueryobject。所以使用.triggerHandler()时链式调用得自己实现。
使用trigger()与triggerHandler()注意事项
有一次我用trigger('click')来触发点击事件时,鼠标并没有改变位置,也就是说鼠标焦点没有改变。测试了下发现,trigger()与triggerHandler()触发事件时并不会改变鼠标焦点,所以trigger('click')方式触发点击事件这种方式,还是和用户真正执行点击动作是不同的。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。