addEventListener中的第三个参 数

addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外),true为为捕获 capture方式(由外向里)。

function addEvent(obj,sEv,fn){

  if(obj.addEventListener){

    obj.addEventListner(sEv,fn,false);

  }else{

    obj.attatchEvent('on'+sEv,fn);

  }

}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}

#div1{width:400px;height:400px; background:red;}
#div2{width:300px;height:300px; background:yellow;}
#div3{width:200px;height:200px; background:#000;}
#div4{width:100px;height:100px; background:#0f0;}
</style>
<script>
window.onload=function()
{
    var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oDiv3=document.getElementById('div3');
    var oDiv4=document.getElementById('div4');    

    
    oDiv1.addEventListener('click',function(){
        alert(1);    
    },false);
    
    oDiv2.addEventListener('click',function(){
        alert(2);    
    },true);
    
    oDiv3.addEventListener('click',function(){
        alert(3);    
    },false);
    
    oDiv4.addEventListener('click',function(){
        alert(4);    
    },false);
};

</script>
</head>

<body>


<div id="div1">

<div id="div2">

<div id="div3">

<div id="div4">

</div>
</div>
</div>
</div>

</body>
</html>
如果问题,欢迎大家及时指点,一同交流,共同提高
原文地址:https://www.cnblogs.com/wujidns/p/4484970.html