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>
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>
采用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>
采用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>
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>
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>
采用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>
采用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>