浏览器事件流机制

作者: 练习时长2年半的个人练习生 | 来源:发表于2020-06-22 15:44 被阅读0次

JavaScript的事件机制详解
浏览器事件流机制
浏览器事件机制
DOM事件流
--
11-3答辩
注册登录和事件
JavaScript 异步编程的几个方法
事件
阻止浏览器事件冒泡

事件捕获/事件冒泡

他们的本质是事件流的两个方向.

事件捕获 window------------------>到目标节点
事件冒泡目标节点---------------->window

注意:他们传递的是事件.而不是事件绑定的函数

应用场景:可以用他们实现事件委托.

事件冒泡示例:

通过事件冒泡的原理, li被点击后.事件传递到ul上,ul触发onclik绑定的方法. target 表示的是点击的目标对象. 让后,改变target对象实现事件委托.
好处就是:减少了重复绑定.减少了遍历带来的性能损耗.

<body>
 <ul id="div1">

     <li >111111111111111111</li>
     <li >222222222222222222</li>
     <li >333333333333333333</li>
     <li >444444444444444444</li>
     <li >555555555555555555</li>
 </ul>
</body>
//html代码
<script>
 var div1 = document.getElementById("div1");
 var li = document.getElementsByTagName('li')

  div1.onclick = function (event) { 
     console.log('father')
     if(event.target.nodeName=='LI')  {
         event.target.style.color = 'red'
     }
  };
 
  Array.prototype.forEach.call(li,(item)=>{
    //  item.onclick = e => e.stopPropagation()
  })

addEventListener 的第三个参数控制浏览器在捕获阶段执行,还是冒泡阶段执行.. true为捕获 false为冒泡.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件捕获</title>
    <style type="text/css">
        #ul {
            width: 300px;
            height: 300px;
            border: hotpink 3px solid;
        }
    </style>
</head>

<body>
    <div id="outer" style="width: 300px;height: 300px;background:black;">

        <div id="middle"  style="width: 200px;height: 200px;background:blue;">

            <div id="inner"  style="width: 100px;height: 100px;background:red;"></div>
        </div>
    </div>
</body>
<script>
    var outer = document.getElementById("outer");
    var middle = document.getElementById('middle')
    var inner = document.getElementById('inner')
  

    outer.addEventListener('click', function () {
        console.log('爷爷')
    }, true)
    middle.addEventListener('click', function () {
        console.log('父亲')
    }, true)
    inner.addEventListener('click', function () {
        console.log('孩子')
    }, true)

    //点击孙子  执行结果. 爷爷/父亲/孩子
</script>

</html>