码迷,mamicode.com
首页 > 其他好文 > 详细

事件捕获 & 事件冒泡

时间:2017-04-09 14:49:13      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:listen   element   函数   function   class   事件触发   event   win   document   

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

<script>
window.onload = function() {
        
    var oDiv1 = document.getElementById(div1);
    var oDiv2 = document.getElementById(div2);
    var oDiv3 = document.getElementById(div3);
    
    function fn1() {
        alert( this.id );
    }
    
    /*oDiv1.onclick = fn1;
    oDiv2.onclick = fn1;
    oDiv3.onclick = fn1;*/
    
    //false = 冒泡(出去)     true = 捕获(进来)
    
    //告诉div1,如果有一个出去的事件触发了你,你就去执行fn1这个函数
    /*oDiv1.addEventListener(‘click‘, fn1, false);
    oDiv2.addEventListener(‘click‘, fn1, false);
    oDiv3.addEventListener(‘click‘, fn1, false);*/
    
    //告诉div1,如果有一个进来的事件触发了你,你就去执行fn1这个函数
    /*oDiv1.addEventListener(‘click‘, fn1, true);
    oDiv2.addEventListener(‘click‘, fn1, true);
    oDiv3.addEventListener(‘click‘, fn1, true);*/
    
    oDiv1.addEventListener(click, function() {
        alert(1);
    }, false);
    oDiv1.addEventListener(click, function() {
        alert(3);
    }, true);
    oDiv3.addEventListener(click, function() {
        alert(2);
    }, false);
    //3 2 1
    
}
</script>

 

事件捕获 & 事件冒泡

标签:listen   element   函数   function   class   事件触发   event   win   document   

原文地址:http://www.cnblogs.com/chiangyibo/p/6684562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!