欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年07月20日 08:03:10   投稿：jingxian  
下面小編就為大家?guī)硪黄猨s 事件的傳播機(jī)制(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

　　冒泡階段：從內(nèi)到外依次觸發(fā)相關(guā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ù)是行為的類型 第二個(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)文章

最新評(píng)論