首页 > 代码库 > JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
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="http://www.mamicode.com/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指向window17 //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=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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="http://www.mamicode.com/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="http://www.mamicode.com/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>
JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。