JavaScript和JQuery中的事件委托链事件冒泡事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我，如今在一家公司做技术部经理的职位，发现有很多程序员的基本功相当糟糕，在组织企业内部培训时讲解了一些案例，总结了一些经典代码，希望对自己和有需要的人提供一些帮助吧：

JavaScript版本:

DOM0事件不支持委托链

 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>DOM0事件不支持委托链</title>
 6     <script language="javascript" type="text/javascript">
 7         window.onload = function () {
 8             //DOM0事件不支持委托链
 9             document.getElementById("child").onclick = function () {
10                 output("abc");
11             };
12             document.getElementById("child").onclick = function () {
13                 output("123");
14             };
15             document.getElementById("child").onclick = function () {
16                 output("def");
17             };
18             document.getElementById("child").onclick = function () {
19                 output("456");
20             };
21         };
22 
23         function output(text) {
24             document.getElementById("content").innerHTML += text + "<br/>";
25         }
26     </script>
27 </head>
28 <body id="body">
29     <div id="parent">
30         <div id="child">
31             点击这里
32         </div>
33     </div>
34     <div id="content">
35     </div>
36 </body>
37 </html>

event01

DOM2事件支持委托链

 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>DOM2事件支持委托链</title>
 6     <script language="javascript" type="text/javascript">
 7         window.onload = function () {
 8             //DOM2事件支持委托链
 9             if (document.all) {
10                 document.getElementById("child").attachEvent("onclick", function () {
11                     output("IE:abc");
12                 });
13                 document.getElementById("child").attachEvent("onclick", function () {
14                     output("IE:123");
15                 });
16                 document.getElementById("child").attachEvent("onclick", function () {
17                     output("IE:def");
18                 });
19                 document.getElementById("child").attachEvent("onclick", function () {
20                     output("IE:456");
21                 });
22             } else {
23                 document.getElementById("child").addEventListener("click", function () {
24                     output("Other:abc");
25                 });
26                 document.getElementById("child").addEventListener("click", function () {
27                     output("Other:123");
28                 });
29                 document.getElementById("child").addEventListener("click", function () {
30                     output("Other:def");
31                 });
32                 document.getElementById("child").addEventListener("click", function () {
33                     output("Other:456");
34                 });
35             }
36         };
37 
38         function output(text) {
39             document.getElementById("content").innerHTML += "注意IE和Other的顺序：" + text + "<br/>";
40         }
41     </script>
42 </head>
43 <body id="body">
44     <div id="parent">
45         <div id="child">
46             点击这里
47         </div>
48     </div>
49     <div id="content">
50     </div>
51 </body>
52 </html>

event02

采用DOM0方式添加所有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>采用DOM0方式添加所有html事件,支持取消事件冒泡</title>
 6     <script src="js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         window.onload = function () {
 9             //给所有DOM对象添加所有html的click事件，采用DOM0方式
10             var tags = document.getElementsByTagName("*");
11             for (var i = 0 ; i < tags.length ; i++) {
12                 var tag = tags[i];
13                 tag.onclick = onEvent;
14             }
15         };
16         function onEvent(event) {
17             //window.alert(event);//IE不支持
18             //return;
19 
20             //event = event ? event : window.event;
21             //window.alert(event);//都支持
22             //return;
23 
24             //window.alert(event.target);//IE不支持
25             //return;
26 
27             //event = event ? event : window.event;
28             //target = event.target ? event.target : event.srcElement;
29             //window.alert(target);//都支持
30             //return;
31 
32             //event = event ? event : window.event;
33             //target = event.target ? event.target : event.srcElement;
34             //output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
35             //return;
36 
37             event = event ? event : window.event;
38             target = event.target ? event.target : event.srcElement;
39             output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
40 
41             //支持取消事件冒泡
42             if (event.cancelable) {
43                 event.stopPropagation();//其他浏览器取消事件冒泡
44             } else {
45                 event.cancelBubble = true;//IE取消事件冒泡
46             }
47         };
48         function output(text) {
49             document.getElementById("content").innerHTML += "" + text + "<br/>";
50         }
51     </script>
52 </head>
53 <body id="body">
54     <div id="parent">
55         <div id="child">
56             点击这里
57         </div>
58     </div>
59     <div id="content">
60     </div>
61 </body>
62 </html>

event03

采用DOM2方式添加所有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>采用DOM2方式添加所有html事件,支持取消事件冒泡</title>
 6     <script language="javascript" type="text/javascript">
 7         window.onload = function () {
 8             //给所有DOM对象添加所有html的click事件，采用DOM2方式
 9             var tags = document.getElementsByTagName("*");
10             for (var i = 0 ; i < tags.length ; i++) {
11                 (function () { //增加闭包，解决IE浏览器onEvent方法定义里面的this都指向了每一个不同的事件对象，而不是都指向了同一个content事件对象，
12                     var tag = tags[i];
13                     //DOM2方式
14                     if (document.all) {
15                         //IE浏览器
16                         //tag.attachEvent("onclick", onEvent);//onEvent里面的this指向window
17                         //tag.attachEvent("onclick", function () {
18                         //    onEvent.call(tag);//onEvent方法定义里面的this都指向了content，因为没有使用闭包
19                         //});
20                         tag.attachEvent("onclick", function () {
21                             onEvent.call(tag);//使用闭包的方式解决this的问题，在var = tags[i];上面增加闭包的使用
22                         });
23                     } else {
24                         tag.addEventListener("click", onMaoPaoEvent);//事件冒泡，false可以不写
25                         //tag.addEventListener("click", onMaoPaoEvent, false);//事件冒泡
26                         tag.addEventListener("click", onBuHuoEvent, true);//事件捕获
27                     }
28                 })();
29             }
30         };
31         function onEvent(event) {
32             event = event ? event : window.event;
33             target = event.target ? event.target : event.srcElement;
34             output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
35             return;
36             //同样支持取消事件冒泡
37             if (event.cancelable) {
38                 event.stopPropagation();//其他浏览器取消事件冒泡
39             } else {
40                 event.cancelBubble = true;//IE取消事件冒泡
41             }
42         };
43         function onMaoPaoEvent(event) {
44             event = event ? event : window.event;
45             target = event.target ? event.target : event.srcElement;
46             output("事件冒泡-->事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
47             return;
48             //同样支持取消事件冒泡
49             if (event.cancelable) {
50                 event.stopPropagation();//其他浏览器取消事件冒泡
51             } else {
52                 event.cancelBubble = true;//IE取消事件冒泡
53             }
54         };
55         function onBuHuoEvent(event) {
56             event = event ? event : window.event;
57             target = event.target ? event.target : event.srcElement;
58             output("事件捕获-->事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生捕获
59             return;
60             //同样支持取消事件捕获
61             if (event.cancelable) {
62                 event.stopPropagation();//其他浏览器取消事件冒泡
63             } else {
64                 event.cancelBubble = true;//IE取消事件冒泡
65             }
66         };
67         function output(text) {
68             document.getElementById("content").innerHTML += "" + text + "<br/>";
69         }
70     </script>
71 </head>
72 <body id="body">
73     <div id="parent">
74         <div id="child">
75             点击这里
76         </div>
77     </div>
78     <div id="content">
79     </div>
80 </body>
81 </html>

event04

JQuery版本:

DOM0事件不支持委托链

 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>DOM0事件不支持委托链</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             //DOM0事件不支持委托链
10             $("#child")[0].onclick = function (event) {
11                 output("abc");
12             };
13             $("#child")[0].onclick = function (event) {
14                 output("123");
15             };
16             $("#child")[0].onclick = function (event) {
17                 output("def");
18             };
19             $("#child")[0].onclick = function (event) {
20                 output("456");
21             };
22         });
23         function output(text) {
24             $("#content").append(text + "<br/>");
25         }
26     </script>
27 </head>
28 <body id="body">
29     <div id="parent">
30         <div id="child">
31             点击这里
32         </div>
33     </div>
34     <div id="content">
35     </div>
36 </body>
37 </html>

jquery_event01

DOM2事件支持委托链

 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>DOM2事件支持委托链</title>
 6     <script src="/js/jquery-1.8.2.js"></script>
 7     <script language="javascript" type="text/javascript">
 8         $(function () {
 9             //DOM2事件支持委托链
10             $("#child").bind("click", function (event) {
11                 output("abc");
12             });
13             $("#child").bind("click", function (event) {
14                 output("123");
15             });
16             $("#child").bind("click",  function (event) {
17                 output("def");
18             });
19             $("#child").bind("click",  function (event) {
20                 output("456");
21             });
22             //第二种方式也支持委托链
23             //$("#child").click(function (event) {
24             //    output("abc");
25             //});
26             //$("#child").click(function (event) {
27             //    output("123");
28             //});
29             //$("#child").click(function (event) {
30             //    output("def");
31             //});
32             //$("#child").click(function (event) {
33             //    output("456");
34             //});
35         });
36         function output(text) {
37             $("#content").append(text + "<br/>");
38         }
39     </script>
40 </head>
41 <body id="body">
42     <div id="parent">
43         <div id="child">
44             点击这里
45         </div>
46     </div>
47     <div id="content">
48     </div>
49 </body>
50 </html>

jquery_event02

采用DOM0方式添加所有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>采用DOM0方式添加所有html事件,支持取消事件冒泡</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.onclick = function (event) {
11                     event = event ? event : window.event;
12                     target = event.target ? event.target : event.srcElement;
13                     output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
14 
15                     //支持取消事件冒泡
16                     if (event.cancelable) {
17                         event.stopPropagation();//其他浏览器取消事件冒泡
18                     } else {
19                         event.cancelBubble = true;//IE取消事件冒泡
20                     }
21                 };
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             点击这里
33         </div>
34     </div>
35     <div id="content">
36     </div>
37 </body>
38 </html>

jquery_event03

采用DOM2方式添加所有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>采用DOM2方式添加所有html事件,支持取消事件冒泡</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", function (event) {
11                     output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id);//DOM2会产生冒泡
12                     //支持取消事件冒泡
13                     event.stopPropagation();
14                 });
15                 //第二种方式也支持
16                 //$(item).click(function (event) {
17                 //    output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id);//DOM2会产生冒泡
18                 //    //支持取消事件冒泡
19                 //    //event.stopPropagation();
20                 //});
21             });
22         });
23         function output(text) {
24             $("#content").append(text + "<br/>");
25         }
26     </script>
27 </head>
28 <body id="body">
29     <div id="parent">
30         <div id="child">
31             点击这里
32         </div>
33     </div>
34     <div id="content">
35     </div>
36 </body>
37 </html>

jquery_event04