JS 事件绑定和DOM事件流(冒泡和捕获)

JS事件绑定

均以点击事件为例:

方法1:把函数绑定在HTML标签上

也叫HTML元素行间事件


function btnClick() {
  console.log(this, 'oBtn被点击了') // this指向 window对象
}
方法二:把函数赋值给DOM元素的事件处理程序属性

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



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,DocumentWindow或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
type:表示监听事件类型的字符串。
listener:当所监听的事件类型触发时调用的函数
useCapture:指在事件冒泡阶段/捕获阶段触发该监听器,以处理事件处理程序。默认值 false,即冒泡阶段触发。

看下例子:


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标签,即使href为空点击我默认还是会跳转

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

你可能感兴趣的:(JS 事件绑定和DOM事件流(冒泡和捕获))