js 事件冒泡测试

来源：互联网发布：多益网络人事工资编辑：程序博客网时间：2024/06/07 20:20

js 写多了回头看看这个事件冒泡没啥意思但是也整理一下

注意 addEventListener 的第三个参数

还有这个不是问题也不是缺陷只是一个机制

html

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title><meta charset="utf-8" />    <script src="../Scripts/JavaScript6.js"></script>    <link href="../Content/StyleSheet6.css" rel="stylesheet" /></head><body>    <div id="id1">        <div id="id2"></div>    </div></body></html>

window.onload = function () {    document.getElementById('id1').addEventListener('click', function () { alert('id1'); }, false);    document.getElementById('id2').addEventListener('click', function () { alert('id2'); }, false);};

css

body {}#id1 {    width: 200px;    height: 200px;    position: absolute;    top: 100px;    left: 100px;    background-color: blue;    z-index: 4;    cursor:pointer;}#id2 {    width: 200px;    height: 200px;    position: absolute;    top: 20px;    left: 70px;    background-color: green;    z-index: 1;    cursor:pointer;}

0 0

js 事件冒泡 测试

js 事件冒泡测试