DOM事件模型与事件委托

DOM：Document Object Model”的缩写，中文译为“文档对象模型”。它是一种跨平台、跨语言的编程接口，将HTML，XHTML，XML文档映射成树形结构，树的每一个节点都是一个对象。正因如此，面向对象的编程语言（如javascript）可以通过DOM对HTML，XHTML，XML文档进行操作。对于HTML文档来说，它的根结点为document对象，HTML元素为element对象，HTML元素的属性为attr对象。

DOM事件：在浏览网页时，我们常常需要页面对用户的操作作出响应，比如点击“阅读全文”后我们期望页面展示被折叠的文本，按下回车键后浏览器提交已填好的表单。用户的各种操作都是“事件”。事件都是在对象上发生的，可能是DOM对象、BOM对象，等等。事件发生后，对象可能会作出响应，也有可能“无动于衷”。我们希望DOM元素对事件作出响应，一般而言有两种方法

**点击事件：**在三个div中分别添加事件监听fn1/fn2/fn3，然后点击文字

    <div class="爷爷">
        <div class="爸爸">
            <div class="儿子">文字</div>
        </div>
    </div>

**调用顺序：**首先按照fn1>fn2>fn3的顺序，然后再按照fn3>fn2>fn1的顺序

从外到内找监听函数，叫事件捕获

从内到外找监听函数，叫事件冒泡

开发者可以把监听函数放在捕获阶段还是冒泡阶段。

DOM机制示意图：

当标签被点击时，那要先调用谁的函数呢？捕获阶段会从window开始，结束后。会到达目标阶段判断是否冒泡（一般会需要冒泡），然后再从到window。

最重要的函数叫做：addEventListener 事件绑定API，如果bool为true，则在捕获阶段查询监听函数

**事件委托：**事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

委托一个元素，监听我本该监听的东西

假设有一百个button，则下面代码

div1.addEventListener('click',(e)=>{
    const t=e.target
    if(t.tarName.tolLowerCase()==='button'){
        console.log('button 被点击了')
    }})

即可监听这一百个button是否有被点击。

如果要监听一个目前不存在的元素点击事件，可以监听祖先元素，等点击的时候看看是不是想要的监听元素即可（优点：省监听数，可以监听动态元素），因为div是动态判断的。

事件委托是利用事件冒泡的原理实现的。