JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各類使用區別

時間 2019-11-19

標籤 jquery 事件 bind unbind live delegate trigger triggerhandler 各類使用區別欄目 JQuery 简体版

原文原文鏈接

JQuery事件one，支持參數javascript

 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，支持參數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，支持參數</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，支持綁定和取消綁定多個事件java

 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("mouseenter mouseleave", function (event) {
17                 $(this).toggleClass("bg");
18             });
19             //unbind支持取消綁定事件
20             $("#child").unbind("mouseleave");
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，支持綁定和取消綁定多個事件（使用命名空間取消綁定）jquery

 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("mouseenter.test mouseleave.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的事件綁定app

 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的事件綁定ide

 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同樣的事件ui

 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的事件綁定this

 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的事件綁定，使用上下文參數spa

 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方式3d

 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("mouseenter mouseleave", function (event) {
17                 $(this).toggleClass("bg");
18             });
19             //off支持取消綁定事件
20             $("#child").off("mouseleave");
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")
10             //$("*:not(a)")
11             //$("*").filter(":not(a)")
12             //以上三種寫法都沒有給a增長click事件,可是bind事件會產生事件路由,即便下面的function中加上了event.stopPropagation();也不能解決第一次點擊a以後執行click事件
13             $("*").not("a").bind("click", function (event, note) {
14                 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件對象：" + event.currentTarget.id + "，note參數：" + note);//DOM2會產生冒泡
15                 //取消form表單提交或a打開的超鏈接
16                 //event.preventDefault();
17                 //一樣也支持取消(*)事件冒泡
18                 //event.stopPropagation();//經過A使用trigger以後，這裏還可使用取消事件冒泡的方法。
19             });
20 
21             $("a").bind("click", function (event) {
22                 //取消form表單提交或a打開的超鏈接
23                 event.preventDefault();
24                 //一樣也支持取消(A)事件冒泡
25                 event.stopPropagation();
26                 $("#button").trigger("click", ["經過a點擊的click事件"]);//支持事件冒泡
27             });
28         });
29         function output(text) {
30             $("#content").append(text + "<br/>");
31         }
32     </script>
33 </head>
34 <body id="body">
35     <div id="parent">
36         <div id="child">
37             <a id="link" href="http://www.baidu.com">超鏈接（trigger）</a>
38             <input type="button" id="button" value="button（經過a的click事件執行button的click事件）" />
39         </div>
40     </div>
41     <div id="content">
42     </div>
43 </body>
44 </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")
10             //$("*:not(a)")
11             //$("*").filter(":not(a)")
12             //以上三種寫法都沒有給a增長click事件,可是bind事件會產生事件路由,即便下面的function中加上了event.stopPropagation();也不能解決第一次點擊a以後執行click事件
13             $("*:not(a)").bind("click", function (event, note) {
14                 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件對象：" + event.currentTarget.id + "，note參數：" + note);//DOM2會產生冒泡
15                 //取消form表單提交或a打開的超鏈接
16                 //event.preventDefault();
17                 //一樣也支持取消(*)事件冒泡
18                 //event.stopPropagation();//經過A使用triggerHandler以後，這裏能夠再也不使用阻止事件冒泡的方法。可是直接點button仍是會出現事件冒泡
19             });
20             $("a").bind("click", function (event) {
21                 //取消form表單提交或a打開的超鏈接
22                 event.preventDefault();
23                 //一樣也支持取消(A)事件冒泡
24                 event.stopPropagation();//
25                 $("#button").triggerHandler("click", ["經過a點擊的click事件"]);//阻止事件冒泡
26             });
27         });
28         function output(text) {
29             $("#content").append(text + "<br/>");
30         }
31     </script>
32 </head>
33 <body id="body">
34     <div id="parent">
35         <div id="child">
36             <a id="link" href="http://www.baidu.com">超鏈接（triggerHandler）</a>
37             <input type="button" id="button" value="button（經過a的click事件執行button的click事件）" />
38         </div>
39     </div>
40     <div id="content">
41     </div>
42 </body>
43 </html>