e.target與事件委託簡例

target定義：

　　　　target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。

語法：

　　　　event.target

　　　　event.target.nodeName  　　//獲取事件觸發元素標籤name（li,p...）

　　　　event.target.id　　　　　　　//獲取事件觸發元素id

　　　　event.target.className　　//獲取事件觸發元素classname

　　　　event.target.innerHTML　　//獲取事件觸發元素的內容（li）

　　　　等。。。

jquery:this 與 e.target區別

　　　　this會冒泡。e.target不冒泡就是指向事件觸發的dom。

事件委託：原生js

　　　　事件委託就是事件目標自身不處理事件，而是把處理任務委託給其父元素或者祖先元素，甚至根元素（document）。

　　　　使用事件委託時，若是目標元素上的其餘事件處理程序使用.stopPropagation()阻止了事件傳播，那麼事件委託就會失效。

事件委託簡單例子：

　　　　給ul添加監聽click事件，利用冒泡機制具體捕獲是ul下的哪個li觸發的click事件

HTML

1 <ul id="ul">
2     <li id="li-1">1</li>
3     <li id="li-2">2</li>
4     <li id="li-3">3</li>
5     <li id="li-4">4</li>
6     <li id="li-5">5</li>
7 </ul>

JS

1 // 給ul添加監聽器
2 document.getElementById("ul").addEventListener("click",function(e) {
3     // e.target是被點擊的元素!
4     // 篩選觸發事件的子元素若是是li執行的事件
5     if(e.target && e.target.nodeName == "LI") {
6         // 獲取到具體事件觸發的li，輸出其id
7         console.log("List item ",e.target.id.replace("post-")," was clicked!");
8     }
9 });

jQuery(1.7版本起，on()代替live(),bind(),delegate()方法)的on()方法，也是事件委託

　　on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

　　使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。

　　如需移除事件處理程序，請使用 off()方法。如需添加只運行一次的事件而後移除，請使用 one() 方法

若有錯誤，還請指出以便改正。