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

浏览数：331 / 时间：2015年06月09日

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>