JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别

JQuery事件one，支持参数

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件one，支持参数</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $("*").each(function (index, item) {
10                 $(item).one("click", { name: "wyp", age: 33 }, function (event) {
11                     output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡
12                     //取消form表单提交或a打开的超连接
13                     event.preventDefault();
14                     //同样也支持取消事件冒泡
15                     //event.stopPropagation();
16                 });
17             });
18         });
19         function output(text) {
20             $("#content").append(text + "<br/>");
21         }
22     </script>
23 </head>
24 <body id="body">
25     <div id="parent">
26         <div id="child">
27             <a id="link" href="http://www.baidu.com">超连接（第一次点击执行click事件，第二次点击打开超链接）</a>
28             <form id="form" action="http://www.baidu.com">
29                 <input id="submit" type="submit" value="submit（第一次点击执行click事件，第二次点击提交表单）" />
30             </form>
31         </div>
32     </div>
33     <input type="button" id="one" value="one（只执行一次click事件）" />
34     <div id="content">
35     </div>
36 </body>
37 </html>

jquery_event06_one

JQuery事件bind，支持参数

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件bind，支持参数</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $("*").each(function (index, item) {
10                 $(item).bind("click", { name: "wyp", age: 33 }, function (event) {
11                     output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡
12                     //取消form表单提交或a打开的超连接
13                     event.preventDefault();
14                     //同样也支持取消事件冒泡
15                     //event.stopPropagation();
16                 });
17             });
18         });
19         function output(text) {
20             $("#content").append(text + "<br/>");
21         }
22     </script>
23 </head>
24 <body id="body">
25     <div id="parent">
26         <div id="child">
27             <a id="link" href="http://www.baidu.com">超连接（每次点击都执行click事件）</a>
28             <form id="form" action="http://www.baidu.com">
29                 <input id="submit" type="submit" value="submit（每次点击执行click事件）" />
30             </form>
31         </div>
32     </div>
33     <input type="button" id="bind" value="bind（每次点击都执行click事件）" />
34     <div id="content">
35     </div>
36 </body>
37 </html>

jquery_event07_bind

JQuery事件bind-unbind，支持绑定和取消绑定多个事件

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件</title>
 6     <style>
 7         .bg{
 8             background-color:yellow;
 9             color:blue;
10         }
11     </style>
12     <script src="/js/jquery-1.8.2.js"></script>
13     <script language="javascript" type="text/javascript">
14         $(function () {
15             //bind支持绑定多个事件
16             $("#child").bind("mouseover mouseout", function (event) {
17                 $(this).toggleClass("bg");
18             });
19             //unbind支持取消绑定事件
20             $("#child").unbind("mouseout");
21         });
22         function output(text) {
23             $("#content").append(text + "<br/>");
24         }
25     </script>
26 </head>
27 <body id="body">
28     <div id="parent">
29         <div id="child">
30             鼠标经过这里
31         </div>
32     </div>
33     <div id="content">
34     </div>
35 </body>
36 </html>

jquery_event08_bind_unbind

JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）</title>
 6     <style>
 7         .bg{
 8             background-color:yellow;
 9             color:blue;
10         }
11     </style>
12     <script src="/js/jquery-1.8.2.js"></script>
13     <script language="javascript" type="text/javascript">
14         $(function () {
15             //bind支持命名空间的方式绑定事件
16             $("#child").bind("mouseover.test mouseout.test", function (event) {
17                 $(this).toggleClass("bg");
18             });
19             //unbind支持通过命名空间的方式取消绑定事件
20             $("#child").unbind(".test");
21         });
22         function output(text) {
23             $("#content").append(text + "<br/>");
24         }
25     </script>
26 </head>
27 <body id="body">
28     <div id="parent">
29         <div id="child">
30             鼠标经过这里
31         </div>
32     </div>
33     <div id="content">
34     </div>
35 </body>
36 </html>

jquery_event09_bind_unbind_namespace

JQuery事件bind不支持动态添加html的事件绑定

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件bind不支持动态添加html的事件绑定</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $(".child").bind("click", function (event) {
10                 window.alert($(this).html());
11             });
12             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，不支持bind事件。
13         });
14         function output(text) {
15             $("#content").append(text + "<br/>");
16         }
17     </script>
18 </head>
19 <body id="body">
20     <div id="content">
21         <div class="child">111111</div>
22     </div>
23 </body>
24 </html>

jquery_event10_bind_problem

JQuery事件live支持动态添加html的事件绑定

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件live支持动态添加html的事件绑定</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $(".child").live("click", function (event) {
10                 window.alert($(this).html());
11             });
12             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，支持click事件。
13         });
14         function output(text) {
15             $("#content").append(text + "<br/>");
16         }
17     </script>
18 </head>
19 <body id="body">
20     <div id="content">
21         <div class="child">111111</div>
22     </div>
23 </body>
24 </html>

jquery_event11_live_solution_bind_problem

JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $("#content").bind("click", function (event) {
10                 //closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。如果自己满足就返回，如果自己不满足，继续向上找。
11                 var obj = $(event.target).closest(".child");
12                 if (obj[0] == event.target) {
13                     window.alert($(event.target).html());
14                 }
15                 /*
16                     对于live而言就是使用事件委派的方式，但是使用这个方式会带来如下问题：每个事件都会冒泡到content上面去，而且还会继续往上冒泡，开销变大
17                 */
18
19             });
20             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，支持click事件。
21         });
22         function output(text) {
23             $("#content").append(text + "<br/>");
24         }
25     </script>
26 </head>
27 <body id="body">
28     <div id="content">
29         <div class="child">111111</div>
30     </div>
31 </body>
32 </html>

jquery_event12_bind_solution_bind_problem

JQuery事件live支持动态添加html的事件绑定

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件live支持动态添加html的事件绑定</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $(".child").live("click", function (event) {
10                 window.alert($(this).html());
11             });
12             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，支持click事件。
13             //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。
14         });
15         function output(text) {
16             $("#content").append(text + "<br/>");
17         }
18     </script>
19 </head>
20 <body id="body">
21     <div id="content">
22         <div class="child">111111</div>
23     </div>
24     <div id="other">
25         <div class="child">333333</div>
26     </div>
27 </body>
28 </html>

jquery_event13_live_problem

JQuery事件live支持动态添加html的事件绑定，使用上下文参数

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件live支持动态添加html的事件绑定，使用上下文参数</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。
10             $(".child", "#content").live("click", function (event) {
11                 window.alert($(this).html());
12             });
13             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，支持click事件。
14         });
15         function output(text) {
16             $("#content").append(text + "<br/>");
17         }
18     </script>
19 </head>
20 <body id="body">
21     <div id="content">
22         <div class="child">111111</div>
23     </div>
24     <div id="other">
25         <div class="child">333333</div>
26     </div>
27 </body>
28 </html>

jquery_event14_live_solution_context

JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。
10             $("#content").delegate(".child", "click", function (event) {
11                 window.alert($(this).html());
12             });
13             //替换live的写法
14             //$(".child", "#content").live("click", function (event) {
15             //    window.alert($(this).html());
16             //});
17             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，支持click事件。
18         });
19         function output(text) {
20             $("#content").append(text + "<br/>");
21         }
22     </script>
23 </head>
24 <body id="body">
25     <div id="content">
26         <div class="child">111111</div>
27     </div>
28     <div id="other">
29         <div class="child">333333</div>
30     </div>
31 </body>
32 </html>

jquery_event15_delegate_replace_live

JQuery事件on动态添加html不支持事件绑定，等同于bind

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件on动态添加html不支持事件绑定，等同于bind</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $(".child").on("click", function (event) {
10                 window.alert($(this).html());
11             });
12             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，不支持click事件。
13         });
14         function output(text) {
15             $("#content").append(text + "<br/>");
16         }
17     </script>
18 </head>
19 <body id="body">
20     <div id="content">
21         <div class="child">111111</div>
22     </div>
23     <div id="other">
24         <div class="child">333333</div>
25     </div>
26 </body>
27 </html>

jquery_event16_on_replace_bind

JQuery事件on支持动态添加html事件绑定

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件on支持动态添加html事件绑定</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $("#content").on("click",".child", function (event) {
10                 window.alert($(this).html());
11             });
12             $("#content").append("<div class=‘child‘>222222</div>");//动态填加html元素，支持click事件。
13         });
14         function output(text) {
15             $("#content").append(text + "<br/>");
16         }
17     </script>
18 </head>
19 <body id="body">
20     <div id="content">
21         <div class="child">111111</div>
22     </div>
23     <div id="other">
24         <div class="child">333333</div>
25     </div>
26 </body>
27 </html>

jquery_event17_on_solution_context

JQuery事件on-off，支持绑定和取消绑定多个事件

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件on-off，支持绑定和取消绑定多个事件</title>
 6     <style>
 7         .bg{
 8             background-color:yellow;
 9             color:blue;
10         }
11     </style>
12     <script src="/js/jquery-1.8.2.js"></script>
13     <script language="javascript" type="text/javascript">
14         $(function () {
15             //on支持绑定多个事件
16             $("#child").on("mouseover mouseout", function (event) {
17                 $(this).toggleClass("bg");
18             });
19             //off支持取消绑定事件
20             $("#child").off("mouseout");
21         });
22         function output(text) {
23             $("#content").append(text + "<br/>");
24         }
25     </script>
26 </head>
27 <body id="body">
28     <div id="parent">
29         <div id="child">
30             鼠标经过这里
31         </div>
32     </div>
33     <div id="content">
34     </div>
35 </body>
36 </html>

jquery_event18_off_relace_unbind

JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $("*:not(a)").bind("click", function (event, note) {
10                 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡
11                 //取消form表单提交或a打开的超连接
12                 //event.preventDefault();
13                 //同样也支持取消(*)事件冒泡
14                 event.stopPropagation();//通过A使用trigger之后，这里还可以使用取消事件冒泡的方法。
15             });
16             $("a").bind("click", function (event) {
17                 //取消form表单提交或a打开的超连接
18                 event.preventDefault();
19                 //同样也支持取消(A)事件冒泡
20                 event.stopPropagation();
21                 $("#button").trigger("click", ["通过a点击的click事件"]);//支持事件冒泡
22             });
23         });
24         function output(text) {
25             $("#content").append(text + "<br/>");
26         }
27     </script>
28 </head>
29 <body id="body">
30     <div id="parent">
31         <div id="child">
32             <a id="link" href="http://www.baidu.com">超连接（trigger）</a>
33             <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" />
34         </div>
35     </div>
36     <div id="content">
37     </div>
38 </body>
39 </html>

jquery_event19_trigger

JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             $("*:not(a)").bind("click", function (event, note) {
10                 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡
11                 //取消form表单提交或a打开的超连接
12                 //event.preventDefault();
13                 //同样也支持取消(*)事件冒泡
14                 //event.stopPropagation();//通过A使用triggerHandler之后，这里可以不再使用阻止事件冒泡的方法。但是直接点button还是会出现事件冒泡
15             });
16             $("a").bind("click", function (event) {
17                 //取消form表单提交或a打开的超连接
18                 event.preventDefault();
19                 //同样也支持取消(A)事件冒泡
20                 event.stopPropagation();//
21                 $("#button").triggerHandler("click", ["通过a点击的click事件"]);//阻止事件冒泡
22             });
23         });
24         function output(text) {
25             $("#content").append(text + "<br/>");
26         }
27     </script>
28 </head>
29 <body id="body">
30     <div id="parent">
31         <div id="child">
32             <a id="link" href="http://www.baidu.com">超连接（triggerHandler）</a>
33             <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" />
34         </div>
35     </div>
36     <div id="content">
37     </div>
38 </body>
39 </html>

jquery_event20_triggerHandler

时间： 2024-08-12 03:18:30

JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别的相关文章

Jquery之事件绑定(bind(),live(),delegate(),on())

1..bind() 描述: 为一个元素绑定一个事件处理程序. .bind()一个基本的用法: $(selector).bind('click', function() { alert('User clicked on "foo."'); }); 可以直接用原生js替代为: $(selector).click( function() { alert('User clicked on "foo."'); }); 在jQuery1.4.3,您现在可以通过传递false代替

jquery中事件重复绑定以及解绑问题

一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有一个问题,unbind会把其之前的所有的click事件都unbind掉,可能会影响其他的绑定,有如下有两种方法解决: 第一种: 使用事件命令空间,来唯一标识这个click的绑定,这样在解绑是不会将其他click绑定的事件也给解绑. $(selector).unbind('click.selector

Jquery绑定事件（bind和live的区别）

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

!!!jQuery中事件绑定 推荐使用.delegate()或者live()

jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码代码如下: $('a').bind('click',function(){al

jQuery中事件绑定

一.前言 最近在做项目中要用到jQuery来绑定事件,首先想到的是$(selector).事件名();这样绑定事件的方式,这种方式对事件进行绑定其实也就是bind()方法,但当选择器匹配的元素过多,$(selector).事件名();对每个元素进行迭代绑定,会影响性能.除了这种方式可以绑定事件以外,还有live()(已过期).delegate().on()方法绑定事件,接下来分析一下它们的区别,以及使用哪种方式最值得推荐.由于live()方法已过期,只分析另外三种,欢迎拍砖.吐槽~~~ 二.用法

jQuery中事件的学习

刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,fn).自我感觉参数的传入形式有点像java的反射机制(自我感觉,不知道是否严谨). 当然相关实现比较麻烦自我感觉.示例: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/

jQuery中事件模块介绍

事件模块 1.提供其他DOM方法 包括:next 和 nextAll方法 1.1 next方法实现 目标:扩展框架方法,获取当前元素的下一个元素 问题:如何获取下一个元素? 1.1.1 提供 nextSibling 工具方法 说明:这是一个工具型方法,用来获取指定元素的下一个元素 itcast.extend({ nextSibling: function(dom) { var nextNode = dom; while(nextNode = nextNode.nextSibling) { if(

关于jquery的事件委托-bind，live，delegate，on的区别发展

1.bind()方法 (只能给已经存在的元素上绑定事件) 只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件. $('ul li').bind('click', function(){ $(this).addClass('active').siblings().removeClass('active'); }); 2.live()方法(绑定到document DOM节点上.和.bind()的优势是支持动态数据) jQuery 1.3新增的.live()方法代替.bind()方

恶补jquery(四)jquery中事件--冒泡

事件 当我们在打开一个页面的时候,浏览器会对页面进行解释执行,这实际上是通过执行事件来驱动的,在页面加载事件时,执行Load()事件,是这个事件实现浏览器解释执行代码的过程. 事件机制 事件中的冒泡现象 冒泡现象说的是事件执行顺序,当一个对象上触发了一个事件,如果没有定义此事件的处理程序或者事件返回true,那么这个事件就会向这个对象的父级对象传播,从里到外,直到他被处理(父级对象所有同类事件都被激活),或者它到达了对象层次的顶层(即document对象). 通俗的讲:假把设一杯水分成不同颜色的