JS target與currentTarget區(qū)別說(shuō)明
更新時(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。
您可能感興趣的文章:
- JS中innerHTML和pasteHTML的區(qū)別實(shí)例分析
- JavaScript中innerHTML,innerText,outerHTML的用法及區(qū)別
- javascript中innerText和innerHTML屬性用法實(shí)例分析
- Javascript中innerHTML用法實(shí)例分析
- js中的觸發(fā)事件對(duì)象event.srcElement與event.target詳解
- JavaScript獲得表單target屬性的方法
- js 有框架頁(yè)面跳轉(zhuǎn)(target)三種情況下的應(yīng)用
- javascript currentTarget對(duì)象介紹
- js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別
相關(guān)文章
Jvascript學(xué)習(xí)實(shí)踐案例(開(kāi)發(fā)常用)
一些在Jvascript學(xué)習(xí)實(shí)踐的實(shí)例代碼,需要的朋友可以參考下2012-06-06js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
使用js簡(jiǎn)單實(shí)現(xiàn)下常用的左側(cè)導(dǎo)航效果為提高導(dǎo)航性能而生,各位朋友可以參考應(yīng)用,希望對(duì)大家有所幫助2013-10-10基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中,經(jīng)常要做拼接字符串的工作,如把json數(shù)據(jù)用HTML展示出來(lái),以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪,加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問(wèn)題2011-10-10fabric.js實(shí)現(xiàn)diy明信片功能
這篇文章主要為大家詳細(xì)介紹了fabric.js實(shí)現(xiàn)diy明信片功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03elementUI 設(shè)置input的只讀或禁用的方法
這篇文章主要介紹了elementUI 設(shè)置input的只讀或禁用的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10Javascript 各瀏覽器的 Javascript 效率對(duì)比
2008-01-01