图解事件委托
事件捕获和事件冒泡
说到事件委托我们就不得不提JS中事件的整个历程中的两个机制：事件捕获和事件冒泡。
然而要说这事件的事件捕获和事件冒泡我们就需要回顾一下Dom的整个模型，说是Dom树其实树仅仅是Dom在算法上的一个近似，我们这里把Dom展开的话，它更类似与图.1中右侧图这种井深图，整个文档是最大的进口，一路深入逐渐收紧。
- 这样的话我们用click做一个类比，我们要在body这个大的井口向div_1这个目标扔一颗浮力小球，假设我们在每一个dom层级的小窗口都布上一层纱网，我们扔下去的小球一路经过就会触发每个纱网。
这个过程就是--事件捕获：当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。
- 而当这个小球落到落点后立即向上浮起，这个小球又是一路向上回到了最大的井口，并且一路经过了所有的纱网。
这个过程就是--事件冒泡：当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件
图.1
addEventListener
addEventListener() 方法用于向指定元素注册事件。
-
type: 必须,String类型,事件类型
-
listener: 必须,函数体或者JS方法
-
useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段
useCapture正是确定要将lisener这个小球经过后要执行的动作到底是小球从上边来的时候干，还是小球浮上来的时候去干。
e.target
说到e.target就是我们在扔出这小球时就应该记录的扔球的目标
Show Code
<script>
window.onload = function(){
let div = document.getElementById('div');
div.addEventListener('click',function(e){
console.log(e.target)
})
}
</script>
<body>
<div id="div">
<div class="div_1">div_1</div>
<div class="div_2">div_2</div>
</div>
</body>
作用
<script>
window.onload = function(){
let div = document.getElementById('div');
div.addEventListener('click',function(e){
console.log(e.target)
})
let div_3 = document.createElement('div');
div_3.setAttribute('class','div_3')
div_3.innerHTML = 'div3';
div.appendChild(div_3)
}
</script>
<body>
<div id="div">
<div class="div_1">div_1</div>
<div class="div_2">div_2</div>
</div>
</body>
这样我们就可以完成同一个DOM元素注册多个同类型事件并且新添加的元素依旧可以触发执行效果
网友评论