JavaScript中事件绑定和DOM事件流(冒泡和捕获)-案例详解

Posted 2022-08-03 JackieDYH

方法1：把函数绑定在html标签上

也叫HTML元素行间事件

<button onclick="btnClick()">我是oBtn，点击我</button>
function btnClick() 
  console.log(this, 'oBtn被点击了') // this指向 window对象

方法二：把函数赋值给DOM元素的事件处理程序属性

也叫DOM 0级事件处理程序
一个DOM元素对象拥有很多事件处理程序属性(onclick是这些属性之一，其他还有很多比如onchange、onfocus...)

<button id="btnId">我是目标oBtn，点击我</button>

var oBtn = document.querySelector('#btnId')
oBtn.onclick = function (event)  // 匿名函数
  console.log('我是oBtn绑定的第一个onclick事件')

// 或者
var btnClick = function() // 函数表达式
  // 函数内部的this指向 oBtn (DOM元素对象/节点对象)
  console.log('我是oBtn绑定的第二个onclick事件', this, this.id)
 
oBtn.onclick = btnClick // 把函数赋值给一个事件处理程序属性(onclick)
// oBtn.onclick = null //去掉绑定的事件

上面代码点击oBtn后执行的结果

我们给element.onclick赋了两次值，第二次的值当然会覆盖第一次，因此只会执行第二个函数里的内容。

方法三：通过事件监听的方式来绑定事件

也叫DOM 2级事件处理程序

function btnClick1() 
  console.log('我是oBtn绑定的监听事件一')

function btnClick2() 
  console.log('我是oBtn绑定的监听事件二', this) // this指向 oBtn

oBtn.addEventListener('click', btnClick1)
oBtn.addEventListener('click', btnClick2)
// oBtn.removeEventListener('click', btnClick1) // 解绑监听事件

addEventListener 可以给同一个事件注册多个事件处理程序。

DOM事件流

【DOM2级事件】规定，事件流包含3个阶段，捕获阶段、目标阶段、冒泡阶段。

• 捕获阶段：事件对象从目标的祖先(Window)一路传播到目标的父级元素。

• 目标阶段：事件对象到达事件目标。如果该事件类型不会冒泡，则事件对象将在此阶段完成后停止。(不会冒泡的事件类型：scroll、blur、focus、mouseleave 、mouseenter 以及Media事件(onpause、onplay等))

• 冒泡阶段：以和捕获阶段相反的顺序，从事件目标的父元素开始传播到Window结束。

最顶层的window省略了

注意: 对于事件目标上的事件监听器来说，事件会处于“目标阶段”。这时会触发该元素（即事件目标）上的所有监听器，而不在乎这个监听器注册时的 useCapture 参数值是true还是false。

addEventListener() 方法可以控制 listener 的触发阶段(捕获/冒泡)。而其他事件绑定方式均没有捕获阶段。虽然一般都是将事件处理程序添加到事件的冒泡阶段(只要不阻止冒泡，且事件类型会冒泡，默认都是在此阶段)，说明冒泡兼容性更好。但在需要灵活控制嵌套元素同一事件的触发顺序这种特殊情况，只有 addEventListener() 能实现。

语法：target.addEventListener(type, listener, [useCapture])

target：一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
type：表示监听事件类型的字符串。
listener：当所监听的事件类型触发时调用的函数
useCapture：指在事件冒泡阶段/捕获阶段触发该监听器，以处理事件处理程序。默认值 false，即冒泡阶段触发。

看下例子：

<button id="btnId">我是目标oBtn，点击我</button>

var oBtn = document.querySelector('#btnId')
var oDiv = document.querySelector('div')
var oBody = document.querySelector('body')

// 绑定 onclick 事件，默认也是按冒泡顺序来执行的，没有捕获阶段。
oBtn.onclick = function () 
  console.log('处于目标阶段，oBtn被点击了')

oDiv.addEventListener('click', function (e) 
  console.log('click监听事件冒泡到div')
)
oBody.addEventListener('click', function () 
  console.log('click监听事件冒泡到body')
)
document.addEventListener('click', function () 
  console.log('click监听事件冒泡到document')
)

oDiv.addEventListener('click', function () 
  console.log('捕获到div被点击')
, true) // true表示在捕获阶段执行，false或不传参表示冒泡阶段
oBody.addEventListener('click', function () 
  console.log('捕获到body被点击')
, true)
document.addEventListener('click', function ()  
  console.log('捕获到document被点击')
, true)

点击后控制台的输出

其实我们也很少利用冒泡做什么实质的操作，甚至经常要阻止冒泡。因此我们可以将事件流理解成：先捕获事件(拿到事件消息)，然后处理，再冒泡出去(给予响应)，这么个过程。

阻止冒泡事件

function stopBubble(event) event.stopPropagation()

var oBtn = document.querySelector('#btnId')
var oDiv = document.querySelector('div')
var oBody = document.querySelector('body')

oBtn.onclick = function () 
  console.log('处于目标阶段，oBtn被点击了')


// DOM 0级事件处理程序，将处理程序绑定在元素的 onclick 属性上，
// 没有捕获阶段，默认也是按冒泡顺序来执行的。
oDiv.onclick = function (e) 
  console.log('onclick绑定事件默认也是冒泡阶段，冒泡到div，且先于addEventListener调用')
  // e.stopPropagation() // 阻止事件冒泡，使用方式和监听器一样

oBody.onclick = function () 
  console.log('onclick绑定事件冒泡到body')


oDiv.addEventListener('click', function (e) 
  console.log('click监听事件冒泡到div')
  e.stopPropagation() // 阻止事件冒泡
)
oBody.addEventListener('click', function () 
  console.log('click监听事件冒泡到body')
)
document.addEventListener('click', function () 
  console.log('click监听事件冒泡到document')
)
document.onclick = function () 
  console.log('onclick绑定事件冒泡到document')

点击后控制台的输出，冒泡到div元素后就停止了

onclick绑定事件(DOM 0级事件处理程序)先于监听器事件(DOM 2级事件处理程序)执行。

阻止默认事件

function stopDefault(event) event.preventDefault()

<a id="aId" href="">我是a标签，即使href为空点击我默认还是会跳转</a>

document.querySelector('#aId').addEventListener('click', function (e) 
  e.preventDefault()
  console.log('我是a链接被点击了，没有跳转')
)