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