关于jQuery的bind()\trigger()\triggerHandler()
1、bind()
事件绑定。
多个事件会链式累加，而不会覆盖。
即
$("div").bind("click",funtion(){alert("test1")});
$("div").bind("click",funtion(){alert("test2")});
最后的结果会出现两次弹窗， test1，test2.
对于存在默认事件的标准DOM事件，则会首先触发DOM事件，然后再触发用户绑定的事件。
2、trigger()
事件触发。
会触发 全部 绑定的事件，即上例中绑定的test1、test2都会被触发。
重要的是，标准DOM事件也会被首先触发。即上例实际上被触发了三次click事件，第一次是我们没有显式绑定的标准DOM事件click，然后才是test1、test2
e.g.此例中绑定了“lalala”事件，没有标准DOM事件，所以只显示一次“发生 Input lalala 事件！”（源码from w3school）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test TriggerHandler</title>
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button> <script type="text/javascript">
$(document).ready(function(){
$("input").bind("lalala",function(){
$("input").after("发生 Input lalala 事件！");
});
$("button").click(function(){
$("input").trigger("lalala");
});
});
</script>
</head>
</html>
</body>
</html>
结果：
如果将上例的事件绑定和触发的事件名换为标准DOM事件，则会先触发之，然后再触发自定义绑定的全部事件；即会触发两次，产生两次” 发生Input select事件“。
代码：
$("input").bind("select",function(){
$("input").after("发生 Input select事件！");
});
$("button").click(function(){
$("input").trigger("select");
});
结果：
3、triggerHandler()
与trigger()相比，有3点比较重要的不同：
(1).只对第一个匹配的元素进行触发操作。
(2).禁止默认事件的触发。
(3).不冒泡
下面用例子说明证明一下：
(1)只对第一个匹配的元素触发操作。
e.g. 写三个色块，绑定一个”click“事件，该事件使div色块消失。事件触发使用triggerHandler()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test jQueryTrigger</title>
<style type="text/css" media="screen">
/*红绿蓝三个色块*/
#testBind{
width: 200px;
height:200px;
background-color: #f00;
}
#testTriggerHandler{
width:200px;
height:200px;
background-color: #0f0;
}
#test3{
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
</head>
<body>
<div id="testBind"></div>
<div id="testTriggerHandler"></div>
<div id="test3"></div>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
(function(){
$("div").bind("click",function(){
$(this).hide();
});
$("div").triggerHandler("click"); //只有红色的被隐藏了，其他的没有
})();
</script>
</body>
</html>
结果：由于triggerHandler只对第一个匹配的元素进行事件触发，所以只有红色的色块被隐藏了。
如果这里换成trigger，发现页面打开时所有的色块都被隐藏了。
(2).禁止默认事件的触发。
在2中的例子中，如果使用triggerhandler()，则只会触发自定义事件，而不会触发标准DOM事件。所以结果只会产生一次”发生Input select事件“。
(3).禁止冒泡事件。
在3（1）例子中添加子元素 testBind1，html改为
<div id="testBind">
<div id="testBind1"></div>
</div>
并给新加入的元素添加css样式
#testBind1{
width: 100px;
height: 100px;
background-color: #000;
}
javascript代码部分修改为
$("div").bind("hideIt",function(){
$(this).hide();
})
$("#testBind1").click(function(){
$(this).triggerHandler("hideIt");
});
结果：只有黑色区域消失了，事件并没有冒泡至红色区域，红色区域没有消失。
如果使用trigger，则红色和黑色区域同时消失了，因为冒泡了。
关于jQuery的bind()\trigger()\triggerHandler()的更多相关文章
- 【jQuery】【转】jQuery中的trigger和triggerHandler区别
trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
- jQuery的.bind()、.live()和.delegate()的区别
参考:http://kb.cnblogs.com/page/94469/ 摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的 ...
- jQuery的.bind()、.live()和.delegate()之间区别
摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及 ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- js的onclick和jquery的bind事件执行先后顺序
近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...
- JQuery中bind和unbind函数与onclick绑定事件区分
JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...
- Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...
- jquery 动态绑定bind()及模拟鼠标点击A链接
近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...
随机推荐
- 转帖：解决jquery.js在myeclipse中报错的问题
转载地址:http://tieba.baidu.com/p/1993753087 从官方下载的jquery.js在myeclipse始终用个大大的红叉,看着很不爽,如何解决呢:jquery.js在my ...
- Java获取本地IP地址
import java.net.InetAddress; import java.net.UnknownHostException; public class IpTest { public stat ...
- URL Routing
们知道在ASP.NET Web Forms中,一个URL请求往往对应一个aspx页面,一个aspx页面就是一个物理文件,它包含对请求的处理. 而在ASP.NET MVC中,一个URL请求是由对应的一个 ...
- sed 例子
sed 应用示例 给1.1.1.1后面增加2.2.2.2: sed -i 's/Server=1.1.1.1/&,2.2.2.2/g' zabbix_agentd.conf
- php sql分离
sql.php <?php $con = mysql_connect("localhost","root","root"); mysq ...
- 关于OC语法的公开和私有的讨论
关于OC语法的公开和私有的讨论 OC语法中,类的.h文件向外面暴露类的功能/方法接口,其中定义的属性/方法/协议/类别/类扩展都属于公开的,但实例变量要看限定词(@protected/@public/ ...
- mac电脑忘记账户名密码解决方法
1,重启电脑 ,开机按command+R 2,等苹果开机完成后会进入单用户模式.然后从单用户模式进入终端. 3,在终端里面输入resetpassword. 4,选择系统(root)账户重新输入密码,存 ...
- The L1 Median (Weber 1909)
The L1 Median (Weber 1909) 链接网址 Derived from a transportation cost minimization problem, the L1 medi ...
- 利用WebService发布图片文件
服务器端: 1.新建一个Asp.net空网站RGImageServer. 2.新建一个WebService项目ImageService,项目新增文件ImageService.asmx,添加方法GetT ...
- python多进程（三种方法）
#!/usr/bin/env python # -*- coding:utf- -*- from multiprocessing import Pool import time def f(x): t ...