16 —— 扩展 —— 事件传播 及 浏览器的事件处理

一,事件传播  

顺序  :   捕获 => 目标 => 冒泡

1,事件的冒泡

2,事件的捕获    

从外往里j进入,叫做事件的捕获过程 。

事件的处理程序发生在冒泡阶段,而不是捕获阶段

举例说明:

例:点击d3  

(1) html => body => d1 => d2 => d3   事件的捕获阶段

(2) 到达 d3       事件的目标阶段

(3) d3 => d2 => d1 => body =>html    事件的冒泡阶段

<html>

  <body>
    <div id="d1">
       d1
      <div id="d2">
        d2
        <div id="d3">
          d3
        </div>
      </div>
    </div>

<script>
  var d1 = document.getElementById('d1')
  var d2 = document.getElementById('d2')
  var d3 = document.getElementById('d3')
  d1.onclick = ()=>{
    alert('d1')
  }
  d2.onclick = ()=>{
    alert('d2')
  }
  d3.onclick = ()=>{
    alert('d3')
  }
</script>
 
——————————————————————————
 
二,事件绑定的三种形式
 
1,行内绑定
2,动态绑定
  d1.onclick = ()=>{}
3,事件监听
  d1.addEventListener('click',()=>{})
 
 
 

猜你喜欢

转载自www.cnblogs.com/500m/p/10954235.html
今日推荐