JS綁定事件 · 致力于web前端技術撰寫

綁定事件有兼容性問題，在IE早期版本中使用的是obj.attachEvent()，而其他瀏覽器使用的則是addEventListener(). 這兩個方法都有三個參數，分別為：事件類型，事件函數，最后一個是布爾值，true或者是false. true表示在事件捕獲階段執行，false表示在事件冒泡階段執行。由于IE只支持事件冒泡，所以同大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，即默認為”false” 這樣可以最大限度地兼容各種瀏覽器。最好只在需要在是事件到達目標之前截獲它的時候將事件處理程序添加到捕獲階段。如果不是特別需要，不建議在事件捕獲階段注冊事件處理程序。兼容各瀏覽器的事件綁定： ~~~ function addEvent(obj, eventType, callback, bubble){ if(obj.addEventListener){ obj.addEventListener(eventType, callback, bubble); }else{ obj.attachEvent(eventType, callback, bubble); } } ~~~ 調用時，注意callback函數不需要加括號，與setTimeout類似。這部分都比較容易理解，對于最后一個參數，相信很多人并不是非常理解，總之我還是需要寫程序測試一下才真正弄通。 **HTML部分內容：** ~~~ <!doctype html> <html lang="en"> <head>  <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content=""> <title>Document</title>  </head> <body> <div id="out"> <p>我是路人甲</p> <div id="middle"> <div id="inner">最里面的</div> </div> <p>我是路人乙</p> </div> </body> </html> ~~~ js內容：(第一種情況) ~~~ <script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點擊inner時，觸發順序為：inner-------middle------out out.addEventListener('click',function(){alert("我是最外面的");},false); middle.addEventListener('click',function(){alert("我是中間的");},false); inner.addEventListener('click',function(){alert("我是最里面的");},false); </script> ~~~ js內容：(第二種情況) ~~~ <script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點擊inner時，觸發順序為：out------inner-------middle out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},true); inner.addEventListener('click',function(){alert("我是最里面的");},true); </script> ~~~ js內容：(第三種情況) ~~~ <script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點擊inner時，觸發順序為：out------inner-------middle out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},false); inner.addEventListener('click',function(){alert("我是最里面的");},false); </script> ~~~ js內容：(第四種情況) ~~~ <script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點擊inner時，觸發順序為：out-------middle------inner out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},true); inner.addEventListener('click',function(){alert("我是最里面的");},false); </script> ~~~ js內容：(第五種情況) ~~~ <script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點擊inner時，觸發順序為：middle-------inner------out out.addEventListener('click',function(){alert("我是最外面的");},false); middle.addEventListener('click',function(){alert("我是中間的");},true); inner.addEventListener('click',function(){alert("我是最里面的");},false); </script> ~~~ js內容：(第六種情況) ~~~ <script> var out = document.getElementById('out'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); //點擊inner時，觸發順序為：out-------inner------middle out.addEventListener('click',function(){alert("我是最外面的");},true); middle.addEventListener('click',function(){alert("我是中間的");},false); inner.addEventListener('click',function(){alert("我是最里面的");},true); </script> ~~~ 看完以上六種情況對應的結果，相信您已經能夠深刻理解，最后一個參數為true或false的區別了。