js第三种添加事件监听的方法

前面写过在元素标签里写onclick();和获取元素通过js添加onclick,这次记addEventListener方法

上一篇记事件响应链的时候记了两个div的嵌套时响应问题(响应链),这次还用嵌套来记addEventListener

先准备好两个嵌套的div,并设置不同的背景色和大小

<div id="outer">

      <div id="inner"></div>

</div>

设置css:

 
#outer {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #inner {
            width: 50px;
            height: 50px;
            background-color: blue;
        }

js代码:

<script>
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");

    // 元素对象的addEventListener方法,为元素添加一个事件监听,第一个参数是要监听的事件类型,第二个参数是事件函数,第三个参数可选,是否在捕获阶段监听,默认为false;
    // 相比于前两种监听方法,这种方法可以为同一个元素的同一个事件添加多个事件函数
    outer.addEventListener("click",function(e){
        console.log("outer捕获阶段");
        // e.stopPropagation();
    },true);

    outer.addEventListener("click",function(e){
        console.log("outer冒泡阶段");
    },false);

    function f1(e){
        console.log("inner捕获阶段");
    }

    inner.addEventListener("click",f1,true);

    inner.addEventListener("click",function(e){
        console.log("inner冒泡阶段");
    },false);

    // 在事件响应链中任何阶段都可以阻止事件的传播

    // removeEventListener移除已经添加过的事件监听
    inner.removeEventListener("click",f1,true);