在"JavaScript進階系列05,事件的執行時機, 使用addEventListener為元素同時註冊多個事件,事件引數"中已經有了一個跨瀏覽器的事件處理機制。現在需要使用這個事件處理機制為頁面元素註冊事件方法。
□ 點選頁面任何部分觸發事件
建立一個script1.js檔案。
(function() {eventUtility.addEvent(document, "click", function(evt) {alert('hello');});}());
頁面部分。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><script src="eventUtility.js"></script><script src="script1.js"></script></body></html>
輸出結果：點選頁面任何一處都會彈出框。
但，我們有時候希望點選document內的某個元素來觸發事件。
□ 使用委託觸發事件
在頁面上增加a標籤。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><div><p><a href="#">點我</a></p></div><script src="eventUtility.js"></script><script src="script1.js"></script></body>
把script1.js修改為：
(function() {eventUtility.addEvent(document, "click", function(evt) {//獲取點選物件var target = eventUtility.getTarget(evt);//獲取點選物件的tag名稱var tagName = target.tagName;//如果tag是aif (tagName === "A") {alert("點我了");//阻止連結的預設行為eventUtility.preventDefault(evt);}});}());
輸出結果：只有點選頁面上的a標籤才彈出框。
以上的好處是：無論document內增加多少a標籤元素，所有a標籤都具有被觸發的能力。像這種方式就是事件委託。我們希望為子元素註冊事件，卻把事件先註冊到子元素的父級元素上，這樣，在該父元素之內、動態新增的、任何與子元素同類的元素都註冊了事件。
如果我們把事件註冊到子元素上，在document中再動態新增與子元素同類的元素，都必須為這些剛動態新增的子元素分別註冊事件。
另外，事件委託很好地利用了"事件冒泡"。當點選子元素，根據"事件冒泡"，該子元素的父級元素捕獲了該次點選事件，並觸發自己的方法。
“JavaScript進階系列”包括：