18、什么是事件模型?

45 阅读1分钟

定义:浏览器处理事件的方式。

分为三个阶段:捕获 -> 目标 -> 冒泡

事件绑定:

ele.onclick = () => {}只支持冒泡

ele.addEventListerner('click', fn, boolean)第三个参数默认为 false(冒泡),为 true(捕获)

事件解绑:

ele.onclick = null

ele.removeEventListerner('click', fn)

作用: 针对列表,可将点击事件绑到父元素,然后通过冒泡机制实现事件委托

阻止事件传播:

event.stopPropagation()只是阻止相同事件的传播,不阻止事件的执行。白话:我执行时无法传播,后续事件(若有)可以执行,但也无法传播

event.stopImmediatePropagation()阻止相同事件的传播与执行。白话:我执行时无法传播,后续事件(若有)也不能执行

阻止默认事件:

event.preventDefault()阻止标签的默认事件,比如 a 标签的跳转