Web API 3：事件进阶

一、事件流

• 事件触发时，会经历两个阶段，分别是：捕获阶段、冒泡阶段。
• 事件捕获(从外到里)

dom对象.addEventListener('事件名',事件处理函数,true)

• 事件冒泡(从里到外)

dom对象.addEventListener('事件名',事件处理函数,[false])

• 阻止事件冒泡

事件对象.stopPropagation()

二、事件委托

• 事件委托：将给子元素注册的事件委托给父元素
• 事件委托的优点：减少注册次数，可以提高程序性能。
• 事件委托的原理：事件冒泡

三、自定义属性

• 标准自定义属性

<a href="javascript:;" data-index="2" data-name="张三" data-age="20">删除</a>

• 标准自定义属性语法

// 获取属性
const 变量 = dom对象.dataset.xxx
// 设置属性
dom对象.dataset.xxx = '值'

四、scroll事件

• 监听整个页面滚动

window.addEventListener('scroll', function(){})

• 监听某个盒子滚动

dom对象.addEventListener('scroll', function(){})

• 页面滚动的距离

document.documentElement.scrollTop