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