js 事件的傳播機(jī)制(實(shí)例講解)

更新時(shí)間：2017年07月20日 08:03:10 投稿：jingxian

下面小編就為大家?guī)?lái)一篇js 事件的傳播機(jī)制(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

事件的默認(rèn)傳播機(jī)制：

　　捕獲階段：從外向里依次查找元素

　　目標(biāo)階段：從當(dāng)前事件源本身的操作

　　冒泡階段：從內(nèi)到外依次觸發(fā)相關(guān)的行為（我們最常用的就是冒泡階段）

具體見(jiàn)下圖：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #outer{
      margin:20px auto;
      padding:20px;
      width:300px;
      height:300px;
      background:#008000;
    }
    #inner{
      padding:20px;
      width:200px;
      height:200px;
      background:blue;
    }
    #center{
      padding:20px;
      width:100px;
      height:100px;
      background:yellow;
    }
  </style>
</head>
<body>
  <div id='outer'>
    <div id='inner'>
      <div id='center'></div>
    </div>
  </div>
  <script>
    var outer = document.getElementById('outer'),inner = document.getElementById('inner'),center = document.getElementById('center');
    //使用DOM0級(jí)事件綁定給元素的某一個(gè)行為綁定的方法，都是在行為觸發(fā)后的冒泡階段把方法執(zhí)行的
    document.body.onclick = function(){
      console.log('body')
    }
    outer.onclick = function(){
      console.log('outer')
    }
    inner.onclick = function(){
      console.log('inner')
    }
    center.onclick = function(){
      console.log('center')
    }

    //addEventListener 第一個(gè)參數(shù)是行為的類(lèi)型 第二個(gè)參數(shù)是給當(dāng)前的行為定義的方法 第三個(gè)參數(shù)是控制在哪個(gè)階段發(fā)生：true 在捕獲階段發(fā)生 false在冒泡階段發(fā)生
    document.body.addEventListener('click',function(){
      console.log('body')
    },false)
    outer.addEventListener('click',function(){
      console.log('outer')
    },true)
    inner.addEventListener('click',function(){
      console.log('inner')
    },false)

    //輸出 outer inner body
  </script>
</body>
</html>

以上這篇js 事件的傳播機(jī)制(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript ECMA-262-3 深入解析（二）：變量對(duì)象實(shí)例詳解
這篇文章主要介紹了JavaScript ECMA-262-3變量對(duì)象,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript ECMA變量對(duì)象相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
echarts動(dòng)態(tài)渲染柱狀圖背景顏色及頂部數(shù)值方法詳解
在使用echarts時(shí),有時(shí)需要給柱狀圖設(shè)置背景,下面這篇文章主要給大家介紹了關(guān)于echarts動(dòng)態(tài)渲染柱狀圖背景顏色及頂部數(shù)值的相關(guān)資料,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂(lè)效果
下面小編就為大家?guī)?lái)一篇20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂(lè)效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
uniapp自定義彈框的方法
這篇文章主要為大家詳細(xì)介紹了uniapp自定義彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
一個(gè)js的tab切換效果代碼[代碼分離]
看了此文（YUI實(shí)現(xiàn)的Tab 切換），有感而發(fā)，寫(xiě)了一個(gè)tab切換的函數(shù)，做學(xué)習(xí)之用。原生js實(shí)現(xiàn)，因?yàn)榭蚣懿缓猛妗?
2010-04-04
js中判斷一個(gè)數(shù)是不是素?cái)?shù)的三種方法例子
這篇文章主要給大家介紹了關(guān)于js中如何判斷一個(gè)數(shù)是不是素?cái)?shù)的三種方法,素?cái)?shù)(只能被1和本身整除的數(shù))規(guī)律:把這個(gè)數(shù)除以它之前的每一個(gè)數(shù)(從2開(kāi)始)只要找到一個(gè)整除(余數(shù)為0)就是非素?cái)?shù),需要的朋友可以參考下
2023-10-10
15位和18位身份證JS校驗(yàn)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇15位和18位身份證JS校驗(yàn)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
js ondocumentready onmouseover onclick onmouseout 樣式
下面都是一些上面的事件觸發(fā)的事先定義的代碼。
2010-07-07
JavaScript是單線程指的是同一時(shí)間只能干一件事情,只有前面的事情執(zhí)行完,才能執(zhí)行后面的事情,這篇文章主要介紹了JavaScript宏任務(wù)(macrotask)和微任務(wù)(microtask) 執(zhí)行順序,需要的朋友可以參考下
2023-10-10