event.currentTarget與event.target的區(qū)別介紹
event.currentTarget與event.target的區(qū)別想大家在使用的時候不是很在意，本文以測試代碼來講解它門之間的不同
event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.
即，event.currentTarget指向事件所綁定的元素，而event.target始終指向事件發(fā)生時的元素。翻譯的不專業(yè)，好拗口啊，還是直接上測試代碼吧：
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上測試輸出如下：
當(dāng)點擊click here!時click會向上冒泡，輸出如下：
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper">…</div>
<a href="#" id="inner">click here!</a>
當(dāng)點擊click here!時click會向上冒泡，輸出如下：
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>
*/
</script>
即，event.currentTarget指向事件所綁定的元素，而event.target始終指向事件發(fā)生時的元素。翻譯的不專業(yè)，好拗口啊，還是直接上測試代碼吧：
復(fù)制代碼 代碼如下:
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上測試輸出如下：
當(dāng)點擊click here!時click會向上冒泡，輸出如下：
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper">…</div>
<a href="#" id="inner">click here!</a>
當(dāng)點擊click here!時click會向上冒泡，輸出如下：
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>
*/
</script>
相關(guān)文章
switch 這種表達(dá)式在很多語言中都有，比如java, C等待， 使用switch比使用if else 來得方便，來得清晰，下面為大家詳細(xì)介紹下其具體的使用，感興趣的朋友可以參考下2013-09-09
本文給大家簡單介紹了在一個項目中涉及到的javascript使用閉包模擬對象的私有屬性和方法，這里記錄下來，分享給大家。2016-10-10
Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...2007-06-06
本文通過實例代碼給大家介紹了js異步上傳圖片文件的方法，包括html和jquery代碼，需要的的朋友參考下吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)上傳文件顯示進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好，需要工程師自己去實現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧，對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12
js動態(tài)設(shè)置鼠標(biāo)事件示例代碼
動態(tài)設(shè)置鼠標(biāo)事件的方法有很多，接下來為大家介紹下js中是如何做到的，感興趣的朋友不要錯過2013-10-10
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-07-07
javascript 延遲加載技術(shù)(lazyload)簡單實現(xiàn)
延遲加載技術(shù)(簡稱lazyload)并不是新技術(shù), 它是js程序員對網(wǎng)頁性能優(yōu)化的一種方案.2011-01-01