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下安装yaf和git

    不得不说win7下安装yaf比mac下安装yaf简单多了 1. phpinof()看一下你的php版本.我的是php 5.4所以我选择是php_yaf-2.1.9-x86-5.4-zts-nodebu ...

  2. LeetCode Find Peak Element

    原题链接在这里:https://leetcode.com/problems/find-peak-element/ 题目: A peak element is an element that is gr ...

  3. APICloud请你看英特尔智能硬件大赛决赛直播

    英特尔智能硬件大赛由英特尔硬享公社(CCE)发起,联合了全国各地50余家产业链优秀合作伙伴,旨在集合全国硬创资源,携手寻找中国最具代表性的硬件创业项目,并通过技术支持.资源对接.产品推广等方式助力项目 ...

  4. myeclipse中的web项目导入到eclipse中注意事项，项目部署到tomcat后无法访问jsp文件

    打开eclipse,点击空白处,右键可以看到import>general>existing projects into workspace>next>选择你的myeclipse ...

  5. OC面向对象—多态

    OC面向对象—多态 一.基本概念 多态是基于继承的基础之上的,多态可以使得父类的指针指向子类的对象.如果函数或参数中使用的是父类类型,可以传入父类.子类对象,但是父类类型的变量不能直接调用子类特有的方 ...

  6. iOS面试题及答案2015.6.7

    iOS面试题及答案     1. Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答: Object-c的类不可以多重继承 ...

  7. [转帖]Speed-BI数据分析案例：2016年8月汽车销量排行榜

    [转帖]Speed-BI数据分析案例:2016年8月汽车销量排行榜 据中国汽车工业协会统计分析,2016年8月,乘用车市场表现较好,当月销量环比和同比均呈较快增长.1-8月,乘用车销量总体呈稳定增长, ...

  8. Android Framework框架_转

    选自<Android内核剖析> Framework定义了客户端组件和服务端组件功能及接口.包含3个主要部分:服务端,客户端和Linux驱动. (一)服务端 服务端主要包含两个重要类,分别是 ...

  9. MongoDB ObjectId

    概述 > db.col.find() { , } { , } { , } { , } 每个文档中都有一个“_id”,她是一个12字节的BSON类型数据,格式如下 56c56dd4ca446fab ...

  10. 修改文件中的内容，使用fileinput模块

    import fileinput filename = 'passwd' ,backup='.bak') print line.replace('root','ROOT') a = ' this is ...