JavaScript事件委托用法分析
本文實例講述了JavaScript事件委托用法。分享給大家供大家參考。具體分析如下:
一、點擊頁面任何部分觸發(fā)事件
創(chuàng)建一個script1.js文件。
eventUtility.addEvent(document, "click", function(evt) {
alert('hello');
});
}());
頁面部分。
<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>
輸出結(jié)果:點擊頁面任何一處都會彈出框。
但,我們有時候希望點擊document內(nèi)的某個元素來觸發(fā)事件。
二、使用委托觸發(fā)事件
在頁面上增加a標簽。
<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修改為:
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);
}
});
}());
輸出結(jié)果:只有點擊頁面上的a標簽才彈出框。
以上的好處是:無論document內(nèi)增加多少a標簽元素,所有a標簽都具有被觸發(fā)的能力。像這種方式就是事件委托。我們希望為子元素注冊事件,卻把事件先注冊到子元素的父級元素上,這樣,在該父元素之內(nèi)、動態(tài)添加的、任何與子元素同類的元素都注冊了事件。
如果我們把事件注冊到子元素上,在document中再動態(tài)添加與子元素同類的元素,都必須為這些剛動態(tài)添加的子元素分別注冊事件。
另外,事件委托很好地利用了"事件冒泡"。當點擊子元素,根據(jù)"事件冒泡",該子元素的父級元素捕獲了該次點擊事件,并觸發(fā)自己的方法。
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
js前端加載超大圖片(100M以上)實現(xiàn)秒開的最佳解決方案
前端加載超大圖片時,一般可以采取圖片壓縮,圖片分割,預加載等措施,而對于幾百M或上G的大圖而言,不管對圖片進行怎么優(yōu)化或加速處理,要實現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進行分割,在前端進行拼接實現(xiàn)秒開,需要的朋友可以參考下2023-10-10webpack配置proxyTable時pathRewrite無效的解決方法
這篇文章主要介紹了webpack配置proxyTable時pathRewrite無效的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12js使用for循環(huán)查詢數(shù)組中是否存在某個值
IE8不支持indexOf,因此寫一個for循環(huán)來判斷是否存在,下面是代碼,經(jīng)測試還不錯2014-08-08詳解JavaScript的閉包、IIFE、apply、函數(shù)與對象
本文主要對JavaScript的閉包、IIFE、apply、函數(shù)與對象進行詳細介紹。有很好的參考價值,需要的朋友一起來看下吧2016-12-12