本文為大家詳細(xì)分析了JS綁定事件，供大家參考，具體內(nèi)容如下
綁定事件有兼容性問題，在IE早期版本中使用的是obj.attachEvent()，而其他瀏覽器使用的則是addEventListener()。
這兩個(gè)方法都有三個(gè)參數(shù)，分別為：事件類型，事件函數(shù)，最后一個(gè)是布爾值，true或者是false。
true表示在事件捕獲階段執(zhí)行，false表示在事件冒泡階段執(zhí)行。
由于IE只支持事件冒泡，所以同大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，即默認(rèn)為”false”
這樣可以最大限度地兼容各種瀏覽器。 最好只在需要在是事件到達(dá)目標(biāo)之前截獲它的時(shí)候?qū)⑹录幚沓绦蛱砑拥讲东@階段。 如果不是特別需要，不建議在事件捕獲階段注冊事件處理程序。
兼容各瀏覽器的事件綁定：
function addEvent(obj, eventType, callback, bubble){ if(obj.addEventListener){ obj.addEventListener(eventType, callback, bubble); }else{ obj.attachEvent(eventType, callback, bubble); } }調(diào)用時(shí)，注意callback函數(shù)不需要加括號，與setTimeout類似。
這部分都比較容易理解，對于最后一個(gè)參數(shù)，相信很多人并不是非常理解，總之我還是需要寫程序測試一下才真正弄通。
HTML部分內(nèi)容：
<!doctype html><html lang="en"> <head> <!--網(wǎng)站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--> <meta charset="UTF-8"> <meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二"> <meta name="Description" content="網(wǎng)站描述內(nèi)容"> <meta name="Author" content=""> <title>Document</title> <!--css js 文件的引入--> </head> <body> <div id="out"> <p>我是路人甲</p> <div id="middle"> <div id="inner">最里面的</div> </div> <p>我是路人乙</p> </div> </body></html>
js內(nèi)容：(第一種情況)
<script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點(diǎn)擊inner時(shí)，觸發(fā)順序?yàn)椋篿nner-------middle------out out.addEventListener('click',function(){alert("我是最外面的");},false); middle.addEventListener('click',function(){alert("我是中間的");},false); inner.addEventListener('click',function(){alert("我是最里面的");},false); </script>js內(nèi)容：(第二種情況)
<script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點(diǎn)擊inner時(shí)，觸發(fā)順序?yàn)椋簅ut------inner-------middle out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},true); inner.addEventListener('click',function(){alert("我是最里面的");},true); </script>js內(nèi)容：(第三種情況)
<script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點(diǎn)擊inner時(shí)，觸發(fā)順序?yàn)椋簅ut------inner-------middle out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},false); inner.addEventListener('click',function(){alert("我是最里面的");},false);</script>js內(nèi)容：(第四種情況)
<script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點(diǎn)擊inner時(shí)，觸發(fā)順序?yàn)椋簅ut-------middle------inner out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},true); inner.addEventListener('click',function(){alert("我是最里面的");},false);</script>js內(nèi)容：(第五種情況)
<script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點(diǎn)擊inner時(shí)，觸發(fā)順序?yàn)椋簃iddle-------inner------out out.addEventListener('click',function(){alert("我是最外面的");},false); middle.addEventListener('click',function(){alert("我是中間的");},true); inner.addEventListener('click',function(){alert("我是最里面的");},false);</script>js內(nèi)容：(第六種情況)
<script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點(diǎn)擊inner時(shí)，觸發(fā)順序?yàn)椋簅ut-------inner------middle out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},false); inner.addEventListener('click',function(){alert("我是最里面的");},true);</script>看完以上六種情況對應(yīng)的結(jié)果，相信您已經(jīng)能夠深刻理解，最后一個(gè)參數(shù)為true或false的區(qū)別了。
新聞熱點(diǎn)
疑難解答
