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()的更多相关文章

  1. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  2. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  3. jQuery的.bind()、.live()和.delegate()的区别

    参考:http://kb.cnblogs.com/page/94469/ 摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的 ...

  4. jQuery的.bind()、.live()和.delegate()之间区别

    摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及 ...

  5. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  6. js的onclick和jquery的bind事件执行先后顺序

    近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...

  7. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

  8. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

  9. jquery 动态绑定bind()及模拟鼠标点击A链接

    近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...

随机推荐

  1. Windows-007-进程相关命令(netstat、tasklist、taskkill、tskill)实战实例图文详解

    本节主要讲述 Windows 系统下,nestat.tasklist.tskill 三个 CMD 命令的参数,及使用方法:以及如何利用三者结合查看进程信息和结束进程.敬请亲们参阅,希望能对亲们有所帮助 ...

  2. python 递归

    学习python,正好用一个例子练习一下递归. 参考文档: http://www.runoob.com/python/python-exercise-example18.html 题目:求s=a+aa ...

  3. IntelliJ IDEA 修改缓存文件设置

    今天在查看C盘,发现虽然我idea安装在了D盘,但是idea的缓存还是在C盘 config 目录是 IntelliJ IDEA 个性化化配置目录,或者说是整个 IDE 设置目录.也是我个人认为最重要的 ...

  4. html 全选或全不选小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. C# WebApi传参之Get请求-AJAX

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.  学无止境,精益求精    在介绍本篇博客之前,先来温故下AJax的请求, ...

  6. The prefix "mx" for element "mx:WindowedApplication" is not bound.

    <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  > ......出现了错误The p ...

  7. 使用 jQuery Deferred 和 Promise 创建响应式应用程序

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...

  8. [翻译] java NIO 教程---介绍

    原文地址:http://tutorials.jenkov.com/java-nio/index.html Java NIO(new IO)是从java1.4之后的对IO API的另一种选择,即对标准j ...

  9. PostgreSQL 一主两备节点(两备节点为同步节点)故障恢复

    PostgreSQL  同步复制及故障恢复 10.2.208.10:node1:master 10.2.208.11:node2:standby1 同步 10.2.208.12:node3:stand ...

  10. JAVA-语法-运算符

    1.赋值运算符  =  (优先级较低) 2.算数运算符  +  —  *  /  % 3.字符串连接运算   +  (把其他类型转成字符串并和字符串类型进行连接) 4.扩展赋值运算符   +=   — ...