事件基礎(chǔ)(2)

js事件的三個階段:捕獲砍鸠,目標(biāo)耕驰,冒泡

IE:IE事件流是事件冒泡流 Netscape事件流是事件捕獲流

IE事件流 叫做事件冒泡,即事件開始時由最具體的元素(文檔中嵌套最深的那個節(jié)點)接收饭弓,然后逐級向上(一直到文檔)媒抠。事件捕獲與事件冒泡事件流正好相反的順序,事件捕獲的事件流是最外層逐級向內(nèi)傳播趴生。


**dom結(jié)構(gòu)
<div id="parent">
       parent
        <div id="child">
            child
        </div>
</div>


js捕獲冲秽,捕獲,冒泡實驗锉桑,

var child = document.getElementById("child");
var parent = document.getElementById('parent');
child.addEventListener('click',function(){
    console.log("child 捕獲");
},true)

child.addEventListener('click',function(){
    console.log("child 冒泡");
},false)

parent.addEventListener('click',function(){
    console.log('parent 捕獲')
},true);

parent.addEventListener('click',function(){
    console.log('parent 冒泡')
},false);


當(dāng)點擊 child DOM 時

輸出:
                parent 捕獲
                child 捕獲
                child 冒泡
                parent 冒泡

點擊 parent DOM 時

輸出:
parent 捕獲
parent 冒泡

阻止默認(rèn)事件兼容代碼書寫

input.onclick = function(s){
    var e = s || window.event  ;
    e.returnValue = false;
    e.preventDefault();
    return false;
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末民轴,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瑰钮,更是在濱河造成了極大的恐慌,老刑警劉巖浪谴,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苟耻,死亡現(xiàn)場離奇詭異扶檐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)款筑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杈湾,“玉大人,你說我怎么就攤上這事饭寺〗行” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵员凝,是天一觀的道長奋献。 經(jīng)常有香客問我,道長瓶蚂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任瞳别,我火速辦了婚禮杭攻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘馆铁。我一直安慰自己锅睛,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布乖订。 她就那樣靜靜地躺著具练,像睡著了一般甜无。 火紅的嫁衣襯著肌膚如雪哥遮。 梳的紋絲不亂的頭發(fā)上眠饮,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天铜邮,我揣著相機(jī)與錄音,去河邊找鬼松蒜。 笑死,一個胖子當(dāng)著我的面吹牛召娜,可吹牛的內(nèi)容都是我干的惊楼。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼雅倒,長吁一口氣:“原來是場噩夢啊……” “哼蔑匣!你這毒婦竟也來了侣诺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤趴久,失蹤者是張志新(化名)和其女友劉穎彼棍,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體座硕,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡华匾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年蜘拉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谎脯。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡持寄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出废麻,到底是詐尸還是另有隱情仲闽,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布屑彻,位于F島的核電站顶吮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏搏恤。R本人自食惡果不足惜熟空,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一息罗、第九天 我趴在偏房一處隱蔽的房頂上張望才沧。 院中可真熱鬧,春花似錦挨摸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春澈圈,著一層夾襖步出監(jiān)牢的瞬間彬檀,已是汗流浹背帆啃。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工瞬女, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人努潘。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓诽偷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親疯坤。 傳聞我的和親對象是個殘疾皇子报慕,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容

  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風(fēng)格下压怠,當(dāng)文檔眠冈、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,251評論 3 11
  • 事件流:事件流所描述的就是從頁面中接受事件的順序蜗顽。IE:IE事件流是事件冒泡流雇盖;Netscape事件流是事件捕獲流...
    Cinderella歌兒閱讀 1,570評論 0 1
  • 事件流 事件流描述的是從頁面中接收事件的順序。但有意思的是狸相,IE 和 Netscape 開發(fā)團(tuán)隊居然提出了差不多是...
    More_5897閱讀 225評論 0 1
  • JavaScript和HTML的交互是通過事件實現(xiàn)的脓鹃。JavaScript采用異步事件驅(qū)動編程模型,當(dāng)文檔渐白、瀏覽器...
    深沉的簡單閱讀 313評論 0 0
  • 1.何謂事件 用戶和網(wǎng)頁交互時的行為,動作,稱之為事件; 2.監(jiān)視事件 現(xiàn)實生活中栋齿,為了監(jiān)視車輛是否違章基协,通過在紅...
    草鞋弟閱讀 599評論 0 0