web前端-事件冒泡

時間冒泡就是說: 當(dāng)點擊子元素的時候, 父元素或者祖先元素如果也綁定了點擊事件, 那么父元素或者祖先元素的事件也會觸發(fā)響應(yīng)的事件.

事件傳播是從父到子
事件響應(yīng)是從子到父
示例代碼如下:

.fatherfather{
    background-color: #80FF00;
    width: 200px;
    height: 200px;
    padding: 40px;
}
.father{
    width: 100px;
    height: 100px;
    background-color: #0094ff;
}
<div class="fatherfather" id="fatherfather">
    <div class="father" id="father">
        <button id="btn">點擊我</button>
    </div>
</div>
window.onload = function () {
    var fafa = document.getElementById('fatherfather');
    var fa = document.getElementById('father');
    var b = document.getElementById('btn');

    fa.onclick = function(){
        console.log("I'm father");
    }
    btn.onclick = function(event){
        var event = event || window.event;
        if (event.stopPropagation) { // 普通瀏覽器取消事件冒泡
            console.log(1);
            event.stopPropagation();// 阻止事件傳播
        } else { // IE 取消時間冒泡
            console.log(2);
            event.cancelBubble = true;// 取消冒泡
        }
        console.log("I'm btn");
    }
    fafa.onclick = function  () {
        console.log('fafa');
    }
    document.onclick = function  () {
        console.log('document');
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末桐臊,一起剝皮案震驚了整個濱河市肋拔,隨后出現(xiàn)的幾起案子烙无,更是在濱河造成了極大的恐慌膜毁,老刑警劉巖备禀,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異何缓,居然都是意外死亡腊瑟,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門锦庸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來机蔗,“玉大人,你說我怎么就攤上這事酸员⊙殉担” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵幔嗦,是天一觀的道長酿愧。 經(jīng)常有香客問我,道長邀泉,這世上最難降的妖魔是什么嬉挡? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任钝鸽,我火速辦了婚禮,結(jié)果婚禮上庞钢,老公的妹妹穿的比我還像新娘拔恰。我一直安慰自己,他們只是感情好基括,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布颜懊。 她就那樣靜靜地躺著,像睡著了一般风皿。 火紅的嫁衣襯著肌膚如雪河爹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天桐款,我揣著相機與錄音咸这,去河邊找鬼。 笑死魔眨,一個胖子當(dāng)著我的面吹牛媳维,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播遏暴,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼侄刽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拓挥?” 一聲冷哼從身側(cè)響起唠梨,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤袋励,失蹤者是張志新(化名)和其女友劉穎侥啤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茬故,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡盖灸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了磺芭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赁炎。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖钾腺,靈堂內(nèi)的尸體忽然破棺而出徙垫,到底是詐尸還是另有隱情,我是刑警寧澤放棒,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布姻报,位于F島的核電站,受9級特大地震影響间螟,放射性物質(zhì)發(fā)生泄漏吴旋。R本人自食惡果不足惜损肛,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荣瑟。 院中可真熱鬧治拿,春花似錦、人聲如沸笆焰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嚷掠。三九已至同波,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叠国,已是汗流浹背未檩。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留粟焊,地道東北人冤狡。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像项棠,于是被迫代替她去往敵國和親悲雳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理香追,服務(wù)發(fā)現(xiàn)合瓢,斷路器,智...
    卡卡羅2017閱讀 134,720評論 18 139
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,348評論 0 8
  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,616評論 2 10
  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中透典,最簡單直接的操作就是...
    mo默22閱讀 1,284評論 0 6
  • 今天是16號,晚上并沒有什么賞月的氣息凑队,只是看著我爸媽疲憊的坐在沙發(fā)上则果。 下午來做客的人是找我爸參考一下婚...
    暖陽里的花貓閱讀 483評論 0 2