图解事件委托

2019-07-30 本文已影响0人子谦Sumer

图解事件委托

事件捕获和事件冒泡

说到事件委托我们就不得不提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元素注册多个同类型事件并且新添加的元素依旧可以触发执行效果

图解事件委托

事件捕获和事件冒泡

addEventListener

e.target

Show Code

作用

猜你喜欢

热点阅读