在"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是a
if (tagName === "A") {alert("點我了");
//阻止連結的預設行為
eventUtility.preventDefault(evt);}});}());
輸出結果:只有點選頁面上的a標籤才彈出框。
以上的好處是:無論document內增加多少a標籤元素,所有a標籤都具有被觸發的能力。像這種方式就是事件委託。我們希望為子元素註冊事件,卻把事件先註冊到子元素的父級元素上,這樣,在該父元素之內、動態新增的、任何與子元素同類的元素都註冊了事件。
如果我們把事件註冊到子元素上,在document中再動態新增與子元素同類的元素,都必須為這些剛動態新增的子元素分別註冊事件。
另外,事件委託很好地利用了"事件冒泡"。當點選子元素,根據"事件冒泡",該子元素的父級元素捕獲了該次點選事件,並觸發自己的方法。
“JavaScript進階系列”包括: