event.currentTarget與event.target的區(qū)別介紹
更新時間：2012年12月31日 13:55:16 作者：
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)點(diǎn)擊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)點(diǎn)擊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)點(diǎn)擊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)點(diǎn)擊click here!時click會向上冒泡，輸出如下：
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>
*/
</script>
相關(guān)文章
js設(shè)置隨機(jī)切換背景圖片的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s設(shè)置隨機(jī)切換背景圖片的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁高度寬度(實(shí)現(xiàn)代碼)
本篇文章主要介紹了JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁高度寬度的實(shí)現(xiàn)代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
javascript寫的異步加載js文件函數(shù)(支持?jǐn)?shù)組傳參)
這篇文章主要介紹了javascript寫的異步加載js文件函數(shù),同時支持單個文件和多個文件(數(shù)組傳參),但不兼容IE6,需要的朋友可以參考下2014-06-06
Typescript tipe freshness 更嚴(yán)格對象字面量檢查
這篇文章主要為大家介紹了Typescript tipe freshness 更嚴(yán)格對象字面量檢查，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
下面小編就為大家?guī)硪黄趓equire.js的使用(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
javascript實(shí)現(xiàn)簡單倒計時效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設(shè)定一個時間, 時間到了, 就會執(zhí)行一個指定的 method2013-04-04
原生JS實(shí)現(xiàn)網(wǎng)絡(luò)彩票投注效果
分享一個最近模仿市面彩票系統(tǒng)寫個小案例，沒有使用任何后臺，從投注到開獎再到返獎都是用原生JS實(shí)現(xiàn)的。2016-09-09
javascript 四則運(yùn)算精度修正函數(shù)代碼
JS預(yù)算精度問題確實(shí)很麻煩，這個能解決一些問題，雖然有bug.2010-05-05