非IE冒泡与捕获

来源：互联网发布：电脑fm软件编辑：程序博客网时间：2024/05/17 00:11

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #div1{            width:500px;            height: 500px;            background-color: aqua;        }        #div2{            width:300px;            height: 300px;            background-color:darkcyan;        }        #div3{            width:100px;            height: 100px;            background-color:darksalmon;        }    </style>    <script>        window.onload = function(){            var div1 = document.getElementById('div1');            var div2 = document.getElementById('div2');            var div3 = document.getElementById('div3');            div1.addEventListener('click',function(){                alert('div1');            },true);//捕获            div3.addEventListener('click',function(e){                alert('div3');               // e.stopPropagation();阻止事件冒泡            },true);//目标函数            div1.addEventListener('click',function(){                alert('div1');            },false);//冒泡                    }    </script></head><body><div id="div1">    <div id="div2">        <div id="div3">        </div>    </div></div></body></html>

非IE浏览器既有捕获又有冒泡

true=捕获

false=冒泡

当我点击div3的时候，先捕获弹出div1，在弹出div3,最后冒泡弹出div1；

像我们平时在传统的绑定事件中，element.onclick = dosomething;是采用了事件冒泡方式。

0 0