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