本文通过具体代码示例,详细解析了jQuery中trigger和triggerHandler两个方法的区别。重点说明trigger会触发元素的默认行为(如checkbox勾选),而triggerHandler仅执行绑定的事件处理函数,阻止默认行为发生。
jQuery中trigger与triggerHandler的区别详解
trigger和triggerHandler均用于模拟事件触发,二者在具体行为上存在显著差异,下面通过具体案例进行说明。
代码如下:
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="checkbox" />
<input type="text" id="test"/>
<input type="button" value="button" id="bnt" onclick="bntClick()"/>
</body>
<script>
$( document ).ready(function() {
$("input[type='checkbox']").bind("click",function(){
$("#test").val("www.baidu.com");
});
});
function bntClick(){
$("input[type='checkbox']").trigger("click");
}
</script>
</html> 当点击复选框(checkbox)时,复选框会被勾选,同时文本输入框(input[type='text'])的值被设置为www.baidu.com。
当点击按钮(input[type='button'])时,会触发与点击复选框相同的效果。
若将trigger替换为triggerHandler,当点击按钮时,仅会执行给文本输入框赋值的操作,而不会勾选复选框。
triggerHandler会阻止绑定事件元素的默认行为。