【筆記】JS的事件冒泡 和 事件捕獲

事件冒泡

香港彩票透码 www.kptln.icu 事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。

事件冒泡自下而上(從最深節點開始,向上傳播事件)的觸發事件

//例子
<div id="parent">
  <div id="child" class="child"></div>
</div>

<script>
    var d_parent = document.getElementById("parent");
    var d_child= document.getElementById("child");
    
    d_parent.addEventListener("click",function(e){
        alert("parent事件被觸發,"+this.id);
    })
    d_child.addEventListener("click",function(e){
        alert("child事件被觸發,"+this.id)
    })
<script>

//結果:
//child事件被觸發,child
//parent事件被觸發,parent

//結論:先child,然后parent。事件的觸發順序自內向外,這就是事件冒泡。

 

阻止冒泡

綁定事件方法的第三個參數,就是控制事件觸發順序是否為事件捕獲。默認false,即事件冒泡。
true,事件捕獲;false,事件冒泡。

<script>
    var d_parent = document.getElementById("parent");
    var d_child= document.getElementById("child");
    d_parent.addEventListener("click",function(e){
        alert("parent事件被觸發,"+this.id);
    },true)
    d_child.addEventListener("click",function(e){
        alert("child事件被觸發,"+this.id)
    },true)
<script>


//結果:
//parent事件被觸發,parent
//child事件被觸發,child

//結論:先parent,然后child。事件觸發順序變更為自外向內,這就是事件捕獲。
來源:itnose

上一篇: 為什么你的Web前端工作經驗不值錢?

下一篇: Vue.js寫一個SPA登錄頁面的過程

分享到: 更多
二人麻将规则及玩法 pk10技巧 稳赚六码 平特三连肖稳赚网站 彩票智能选号软件 北京pk10基本走势图360 5分快三免费计划软件下载 重庆时时开奖结果记录 七乐彩走势图表近30期 重庆时时彩官方开奖 北京pk计划软件手机版 龙虎纸牌游戏 全天赛车pk10免费计划 彩票挂机真的稳赚吗 ag平台作弊截图 pk10实战顺势投注技巧 哪个时时彩计划软件准