一、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之事件