jquery的trigger和triggerHandler区别

 

网上关于这个问题都是抄来抄去的,都没怎么说清楚。所以自己做了个测试,供大家参考指教。首先先看API怎么说的

为了检验一下,编写了一个简单的测试代码,如下:

复制代码
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jquery的trigger和triggerHandler区别</title> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

</head> 
<body> 
<input type="checkbox" id="checkbox1"/><input type="text" id="test1"/>&nbsp;
<input type="checkbox" id="checkbox2"/><input type="text" id="test2"/>
<input type="button" value="trigger" id="bnt" onclick="bntClick()"/>
<input type="button" value="triggerHandler" id="bnt2" onclick="bntClick2()"/>
</body> 

<script> 
$( document ).ready(function() { 
    $("#checkbox1").bind("click",function(){ 
        $("#test1").val("www.baidu.com"); 
    });
    $("#checkbox2").bind("click",function(){ 
        $("#test2").val("www.baidu.com"); 
    });
}); 

function bntClick(){ 
    $("input[type='checkbox']").trigger("click"); 
}

function bntClick2(){ 
    $("input[type='checkbox']").triggerHandler("click"); 
} 
</script> 
</html> 
复制代码

显示的页面如下

1.点击两个checkbox分别会填充各自右边的输入框。这点不用多做解释,大家一看都知道。

2.点击trigger按钮,显示如下:

点击triggerHandler按钮,如下

对比,可知

triggerHandler不会触发浏览器默认事件-因为checkbox的勾并没有打上,这打勾就是浏览器默认事件;

triggerHandler只触发jQuery对象集合中第一个元素的事件处理函数-第二个输入框并没有触发事件;

 API的第三点我只是意会,感觉说不清楚,后期理解深刻了再做补充。。。

 

posted @   llcode  阅读(503)  评论(0编辑  收藏  举报
编辑推荐:
· .NET制作智能桌面机器人:结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
阅读排行:
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· Supergateway:MCP服务器的远程调试与集成工具
· C# 13 中的新增功能实操
点击右上角即可分享
微信分享提示