快捷導(dǎo)航

JS target與currentTarget區(qū)別說明

更新時(shí)間：2011年08月28日 18:51:30 作者：

target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的，而當(dāng)處于捕獲和冒泡階段的時(shí)候，target指向被單擊的對(duì)象而currentTarget指向當(dāng)前事件活動(dòng)的對(duì)象（一般為父級(jí)）。

復(fù)制代碼代碼如下:

 
<div id="outer" style="background:#099"> 
click outer 
<p id="inner" style="background:#9C0">click inner</p> 
<br> 
</div> 

<script type="text/javascript"> 
function G(id){ 
return document.getElementById(id); 
} 
function addEvent(obj, ev, handler){ 
if(window.attachEvent){ 
obj.attachEvent("on" + ev, handler); 
}else if(window.addEventListener){ 
obj.addEventListener(ev, handler, false); 
} 
} 
function test(e){ 
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); 
} 
var outer = G("outer"); 
var inner = G("inner"); 
//addEvent(inner, "click", test); 
addEvent(outer, "click", test); 
</script> 

上面的示例中，當(dāng)在outer上點(diǎn)擊時(shí)，e.target與e.currentTarget是一樣的，都是div；當(dāng)在inner上點(diǎn)擊時(shí)，e.target是p，而e.currentTarget則是div。

您可能感興趣的文章:

相關(guān)文章

深入探討JavaScript中parseInt與Number數(shù)字轉(zhuǎn)換方法的區(qū)別
在Javascript編程中,數(shù)字是一種常見的數(shù)據(jù)類型,經(jīng)常需要在不同的情境下進(jìn)行不同類型的操作,本文將深入探討parseInt()和Number()的區(qū)別,通過代碼示例和詳細(xì)解釋,幫助大家更好地理解它們的用途,需要的朋友可以參考下
2023-08-08
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的搖骰子游戲
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的搖骰子游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
通過實(shí)例解析JavaScript for in及for of區(qū)別
這篇文章主要介紹了通過實(shí)例解析JavaScript for in及for of區(qū)別,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
微信小程序?qū)崿F(xiàn)購(gòu)物車代碼實(shí)例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
js如何獲取網(wǎng)頁(yè)所有圖片
這篇文章主要為大家詳細(xì)介紹了js如何獲取網(wǎng)頁(yè)所有圖片，js獲取網(wǎng)頁(yè)所有圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
理解javascript函數(shù)式編程中的閉包（closure）
這篇文章主要幫助大家理解javascript函數(shù)式編程中的閉包（closure）概念，通俗地講， JavaScript 中每個(gè)的函數(shù)都是一個(gè)閉包，感興趣的小伙伴們可以參考一下
2016-03-03
js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
利用JS自動(dòng)打開頁(yè)面上鏈接的實(shí)現(xiàn)代碼
今天經(jīng)過測(cè)試，實(shí)現(xiàn)了利用JS來自動(dòng)打開頁(yè)面上的鏈接的功能，其實(shí)比較簡(jiǎn)單，就是在頁(yè)面上把鏈接列表列出來，然后通過JQuery的相關(guān)控制，在框架頁(yè)中把鏈接打開，具體能做什么用，大家自己想，哈哈。
2011-09-09
js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件，但本文的這個(gè)是跟著自己的想法寫的，也不知道他人是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下
2014-01-01
淺析document.createDocumentFragment()與js效率
對(duì)于循環(huán)批量操作頁(yè)面的DOM有很大幫助！利用文檔碎片處理，然后一次性append，并且使用原生的javascript語(yǔ)句操作
2013-07-07