<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 300px; height: 300px; background: #00B198; } #div2{ width: 200px; height:200px; background: #a81e32; } #div3{ width:100px; height: 100px; background: #00A7F6; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> <script> var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var div3=document.getElementById("div3"); // div1.οnclick=function () { // alert(1) // } // div2.οnclick=function () { // alert(2) // } // div3.οnclick=function () { // alert(3) // } // div1.addEventListener("click",fa,true) function fa() { alert(1) } // div2.addEventListener("click",fb,true) // function fb() { // alert(2) // } // div3.addEventListener("click",fc,true) // function fc() { // alert(3) // } // 加false执行事件捕获和冒泡,加上true后只执行捕获 // 删除事件监听 // div1.removeEventListener("click",fa // ,true); // // } // 低版本ie事件监听执行 //div1.attachEvent("onclick",function () { // alert("1"); // // }) // 删除低版本ie事件监听 // div1.detachEvent("onclick",function () { // alert("1"); // // }) addEvent(div1,fa,'click',false); // 融合了低版本IE和高版本IE、谷歌、火狐等的方法 function addEvent(obj,fa,even,boolean){ if(obj.addEventListener){ obj.addEventListener(even,fa,boolean) } else{ ev='on'+even; obj.attachEvent(ev,fa); } } </script> </body> </html>
兼容火狐、谷歌、低版本高版本IE的事件监听方法
最新推荐文章于 2022-03-13 09:05:12 发布