js中addEventListener事件参数

219 阅读1分钟
<div id="div1">第一层
    <div id="div2">第二层
        <div id="div3">第三层</div>
    </div>
</div>
<script>
    // addEventListener 第一个参数为事件类型 第二个参数为事件处理行数 第三个参数 useCapture  默认为false 使用冒泡  反之捕获
    var oDvi1 = document.getElementById('div1' ),
        oDvi2 = document.getElementById('div2' ),
        oDvi3 = document.getElementById('div3' );
        oDvi1.addEventListener('click',xx1,false ); //123
        oDvi2.addEventListener( 'click',xx2,true ); //345 123
        oDvi3.addEventListener( 'click',xx3,false ); //345 456 123
        function xx1(){ //蓝
            alert(123);
        }

        function xx2(){ //红
            alert(345);
        }

        function xx3(){//黄
            alert(456);
        }
        // 结论 1、true的触发顺序总是再false之前 
        // 2、如果多个均为true 则外层的触发先于内层
        // 3、如果多个都是false 则内层的触发先于外层

</script>