本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较。分享给大家供大家参考,具体如下:
前言:
最近在工作中做需求时发现了一个诡异的事情,在使用jQuery触发事件时,并不总是先执行默认行为,再执行绑定的事件行为,有时候可能是相反的顺序。于是上网查找了下资料,还真有个外国哥们和我遇到同一个问题!整理下笔记先~ ~
默认行为执行顺序
一般来说,浏览器执行事件的顺序是:先执行默认行为再执行绑定的行为。
可是在 jquery 中有些时候会出现相反的顺序,先执行绑定的行为,再执行默认行为。
那这里说的“有些时候”到底是什么时候呢?
看下面的代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Trigger and Default Behavior Demo</title><script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
// When the DOM is ready, initialize.
$(function(){
$( "input" ).click(
function( objEvent ){
// Alert the checkboxed status.
alert( this.checked );
}
);
$( "button" ).click(
function( objEvent ){
// Trigger click on the checkbox.
$( "input" ).click();
}
);
});
</script>
</head>
<body>
<h1>
jQuery Trigger and Default Behavior Demo
</h1>
<form>
<input type="checkbox" />
<button>click checkbox</button>
</form>
</body>
</html>
说明:页面中有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 事件(不触发浏览器的默认行为)。代码如下所示:










