事件委託

對" 事件處理程序過多 "問題的解決方案是事件委託，事件委託利用了事件的冒泡特性，指制定給一個事件處理程序，就能夠管理某一類型的全部事件。例如click事件會一直冒泡到document層次，也就是說咱們能夠爲整個頁面制定一個onclick事件處理程序，而沒必要給每一個可單擊的元素分別添加事件處理程序。如下面的爲例。

<ul class = "D">
<li id= "gosomewhere">Go somewhere </li>
<li id= "dosomething">Do something </li>
<li id= "say">hello world! </li>
</ul>

其中包含三個被單擊的列表項，傳統作法須要添加三個事件；

var a1 = document.getElementById("A");
var a2 = document.getElementById("B");
var a3 = document.getElementById("C");
//此處eventutil省略 爲封裝的事件處理程序
EventUtil.addHandler(a1, "click", function (event) {
location.href =""https://www.smallclown.cn;
});
EventUtil.addHandler(a2, "click", function (event) {
document.title = "i chenged the title's title";
});
EventUtil.addHandler(a2, "click", function (event) {
console.log("hello world!");
});

利用事件委託，在須要以在DOM樹中儘可能最高的層次上添加一個事件處理程序，以下：

var a4 = document.getElementById("D");
EventUtil.addHandler(a4, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target:id) {
case "A" :
location.href =""https://www.smallclown.cn;
case "B" :
document.title = "i chenged the title's title";
case "C" :
console.log("hello world!");
}
});

更多內容下回在寫，還有好多