js event事件的傳遞與冒泡處理
更新時(shí)間：2009年12月06日 21:49:20 作者：
與Netscape相反，IE中的事件傳遞方向是從事情發(fā)生的對(duì)象開始，然后依次由該對(duì)象向所在的父節(jié)點(diǎn)傳遞。
復(fù)制代碼 代碼如下:
<div>
<table nclick="gotClick(event,'table',this)" id="table">
<tr nclick="gotClick(event,'tr',this)" id="tr">
<td nclick="gotClick(event,'td',this)" id="td">
<input type="button" name="button" value="單擊我"
onclick="gotClick(event,'按鈕',this);" id="button">
</td>
</tr>
</table>
</div>
<div id='result'>
</div>
js文件
復(fù)制代碼 代碼如下:
function gotClick(event,msg,obj){
var object;
var msgs = msg+" => 被單擊了!<br/>";
try{
if (event.target) {//Mozilla
object = event.target;
// alert(document.getElementById(object.id).nodeName+" Mozilla "+msg);
document.getElementById('result').innerHTML +=msgs;
// event.cancelBubble=true;//阻止傳遞
}
else if(event.srcElement){//IE
object = event.srcElement;
// alert(object.id+" IE "+msg);
// event.cancelBubble=true;//阻止傳遞
document.getElementById('result').innerHTML +=msgs;
}
}catch(e){
alert(e);
}
}
運(yùn)行結(jié)果是:
按鈕 => 被單擊了!
td => 被單擊了!
tr => 被單擊了!
table => 被單擊了!
您可能感興趣的文章:
相關(guān)文章
js的map、flatMap和find、filter的使用詳解
map和flatMap都是返回一個(gè)新數(shù)組,map不會(huì)改變數(shù)組長(zhǎng)度,flatMap可以改變長(zhǎng)度,find和filter都是過濾操作,find只會(huì)返回第一個(gè)找到的值,而filter會(huì)返回全部符合要求的對(duì)象2024-12-12
懶加載,前端人都知道的一種性能優(yōu)化方式,簡(jiǎn)單的來說,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí),才設(shè)置圖片正真的路徑,讓圖片顯示出來,這篇文章主要給大家介紹了關(guān)于小程序列表懶加載的實(shí)現(xiàn)方式,需要的朋友可以參考下2022-04-04
獲取客戶端網(wǎng)卡MAC地址和IP地址實(shí)現(xiàn)JS代碼
獲取客戶端的一些信息，如IP和MAC，以結(jié)合身份驗(yàn)證，相信很多人都會(huì)這樣做吧，我們這里用Javascript，這樣做的好處是不需要服務(wù)器端進(jìn)行處理，有客戶端自行獲取，感興趣的你可以參考下哈2013-03-03
這篇文章主要為大家詳細(xì)介紹了js自定義Tab選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)
這篇文章主要介紹了JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn),總結(jié)分析了JavaScript運(yùn)動(dòng)所涉及的相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),并附帶了一個(gè)JavaScript彈性運(yùn)動(dòng)的實(shí)例供大家參考,需要的朋友可以參考下2016-01-01
新年快樂! javascript實(shí)現(xiàn)超級(jí)炫酷的3D煙花特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)超級(jí)炫酷的3D煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
Js中安全獲取Object深層對(duì)象的方法實(shí)例
Object是JavaScript基本數(shù)據(jù)類型之一（function也屬于object，是特殊的object）,其存儲(chǔ)于堆中,這篇文章主要給大家介紹了關(guān)于Js中安全獲取Object深層對(duì)象的相關(guān)資料,需要的朋友可以參考下2021-09-09
BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法
這篇文章主要介紹了BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法,需要的朋友可以參考下2016-12-12
js使用Promise實(shí)現(xiàn)簡(jiǎn)單的Ajax緩存
這篇文章主要介紹了js使用Promise實(shí)現(xiàn)簡(jiǎn)單的Ajax緩存，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
JavaScript實(shí)現(xiàn)將文本框的值插入指定位置的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將文本框的值插入指定位置的方法,涉及javascript節(jié)點(diǎn)添加操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08