addEventListener中的第三个参数

最新推荐文章于 2021-01-01 21:24:50 发布

antelope_2014

最新推荐文章于 2021-01-01 21:24:50 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/wujidns/p/4484970.html

版权

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>