jQuery中trigger与triggerHandler的区别详解

作者:阿沐

时间:2026-10-28

浏览:556

本文通过具体代码示例,详细解析了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会阻止绑定事件元素的默认行为。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章