DOM 事件模型1. DOM与DOM事件 DOM是指DOM文档对象模型，以根元素开头展开成一颗树，描述了处理网页内容的

1. DOM与DOM事件

DOM是指DOM文档对象模型，以根元素开头展开成一颗树，描述了处理网页内容的方法和接口。最根本对象是document（window.document）。什么是DOM事件呢，举例，click就是一个事件，可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。

2. 什么是捕获，什么是冒泡？

DOM事件模型本身就是解释元素有绑定函数执行顺序。从图中我们可以看到事件模型中的三个阶段（按顺序执行） 1.捕获阶段 2.目标阶段 3.冒泡阶段

用哪种顺序？可以通过addEventListener的第三个参数控制
e.addEventLisenter('click',f2,true) // true按捕获方向执行函数
e.addEventLisenter('click',f2,false) // false按冒泡方向执行函数
e.stopPropagation()可以中断冒泡。一般用于封装某些独立的组件。
e.preventDefault()是取消默认事件。

3. target与currentTarget的区别

target是指用户点击的元素
currentTarget是指程序员监听的元素

<div>
    <span>文字</span>
</div>

e.target就是span

e.currentTarget就是div

4. 如何自定义事件？

除了浏览器自带的一百多种事件，程序员还可以自己定义一些事件；

<div>
    <button id="button1"></button>
</div>

button1.addElementListener('click',()=>{
    const event = new CustomEvent('huo',{
    detail:{name:'huo',age:2}
    }) // 声明一个事件，事件名和事件信息
    button1.dispatchEvent(event) //触发这个事件
})
button1.addElementListener('huo',(e)=>{
    console.log(e.detail) //监听这个事件
})

5. 什么是事件委托？

事件委托就是监听祖先元素，等我们点击时来判断它是不是我们要监听的元素，是的话执行函数，事件委托的优点是：节省内存，可以监听动态元素。

完整的封装代码如下：

function on(eventType,element,selector,fn){
    if (!(element instanceof Element)){
        element = document.querySelector(element)
    }
    
    element.addEventListener(eventType,(e)=>{
        let t = e.target
        while(t.tagName.toLowercase() !== selector){
            if(t === element){
                t = null
                break
            }
            t = t.parentNode
        }
        t && fn.call(t,e,t)
    })
    return element
}

文章参考：