js之事件

標籤：出錯   alert   on()   ges   它的   top   綁定   span   選擇   

一、js事件

        在js中有許多的事件綁定。比如滑鼠點擊事件、雙擊事件、鍵盤事件等等。

        其實我相信大多數人都用過很多的事件綁定的方法，js事件參考如下:

        當我們需要一個通用的方法去封裝我們需要的事件的時候，我們該怎麼封裝呢？通過名字去調用嗎，我們有一個添加事件監聽的方法，叫addEventListenner()。我們通過這個來進行事件的註冊監聽。那麼我們是不是要想一想有沒有瀏覽器的相容性的問題呢，答案是當然有，在低版本的IE中我們使用attachEvent()來進行事件的監聽。但是現在對於IE低版本的佔有率已經很低了，所以對於IE低版本的相容我們瞭解即可。

 1 //  我們使用一個函數來封裝一下這個addEventListener 2 var listen = function(el, event, fn) { 3         el.addEventListener(event, fn); 4 } 5  6 var btn = document.getElementById("btn"); 7 listen(btn, "click", function(e) { 8     e.preventDefault();  //  阻止a標籤的預設事件 9     alert("我被點擊了");10 });

        其實在addEventListener這個方法還有第三個參數，是用來決定在冒泡階段還是在捕獲階段執行的：

• true - 事件控制代碼在捕獲階段執行
• false- false- 預設。事件控制代碼在冒泡階段執行

 

 

        事件的冒泡

         事件冒泡是什麼呢？當我們點擊一個元素的時候，這個元素並沒有綁定事件，但是呢，在它的父節點上我們綁定了一個事件，這時候在父節點上的事件會被觸發。

1 <div>2     <p>xsxa</p>3 </div>

1 var _div = document.getElementsByTagName("div")[0];2  _div.addEventListener(‘click‘, function() {3      alert(‘div‘);4  })

        當我們點擊p標籤的時候，沒有觸發事件，但是通過事件冒泡。div元素接收這個事件，然後進行了響應，如果我們在body上也註冊了一個事件，那麼這個事件也會被觸發。

那我們怎麼去阻止冒泡的呢?我們有一個方法叫stopPropatation()，這個方法能夠阻止冒泡。

        事件代理(委託)  

        那麼我們瞭解了事件的冒泡機制之後，我們就來談一談這個東西的應用。在我們實際的工作當中，事件代理也是會用到的，那麼我們需要用到事件代理的情景是怎樣的呢？在一個父元素中，有很多的子項目，他們都有一個觸發事件，比如點擊，當我們要頻繁的去添加、更改子項目的時候，我們就要去為每一個子項目添加事件，這時候頻繁的操作就可能會出錯，同時也帶來了一定的複雜度，比如部落格裡面下拉載入照片，我們需要為每一個圖片添加事件，這時候，我們可以選擇的解決辦法就是使用事件代理。

1 <div id="pics">2     <a href="../">圖片1</a>3     <a href="../">圖片2</a>4     <a href="../">圖片3</a>5     <a href="../">圖片4</a>6     <!-- 下拉載入圖片 -->7 </div>

 1 var pic = document.getElementById("pics"); 2  3 //  使用上面封裝的方法 4  5 listen(pic, "click", function(e) { 6     var target = e.target;    //   擷取被點擊的標籤 7     if (target.nodeName === "A") { 8         alert(target.innerHTML); 9     }10 });

        我們會發現，當我們這樣寫就能夠對這個標籤裡的所有的a元素進行處理，不僅僅能使代碼簡介，同時我們還能減少記憶體的佔用，這就是事件代理的作用，快試試吧。

 

js之事件