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