前端学习（七十） DOM-事件模型（Dom）
程序员文章站
2022-06-16 09:16:09
...
事件模型
首先，先简单的看一下事件流
window -> document -> <html> -> <body> -> <div> -> <p> -> <a>
简单的说就是事件的处理过程，通常来说分为三个阶段，举例
假如，现在点击了a标签，触发了跳转的，那么实际上，这个事件分为了三个步骤
步骤一：capture phase，事件捕获过程
从window开始一直往下走，直到p元素
步骤二：target phase，获取目标阶段
获取到p元素下的a标签
步骤三：bubble phase，冒泡阶段
将事件一直返回到最顶端window对象
事件代理
简单的说，就是，假如有多个子元素，每个子元素都有一个事件监听，那么这样的重复工作就会很多，需要帮每个子元素都绑定一个事件监听，成本高，效率低，那么，我们就给统一给父元素绑定一个事件监听，监听是哪个子元素触发了事件，这种父级元素监听子元素并作出处理的过程就是事件代理，也就是父级元素代理了子元素的事件统一处理
原理就是，在我们上面步骤三中，基于冒泡的原理，当事件冒泡到父级元素时处理子元素事件
大概举例：
var a=document.getElementById('div1');
a.addEventListener('click',function (event) {
var e=event || window.event;
var target = e.target || e.srcElement;
})首先，先获取目标父级div，然后给父级a绑了一个事件监听，监听的是clikc（点击事件），通过回调函数，获取点击目标（后面会详解）
事件代理的优点
- 需要管理的回调函数handler更少了
- 内存分配更少了
- 增加/删除节点时可以不需要额外绑定事件，是动态添加减少的
- 避免增删节点过程中的内存泄漏