|
|
@@ -0,0 +1,87 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ #div1{
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: black;
|
|
|
+ }
|
|
|
+ #div2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ #div3{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: green;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="div1">
|
|
|
+ <div id="div2">
|
|
|
+ <div id="div3"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var div1 = document.getElementById('div1')
|
|
|
+ var div2 = document.getElementById('div2')
|
|
|
+ var div3 = document.getElementById('div3')
|
|
|
+
|
|
|
+ // div1.onclick = function(){
|
|
|
+ // console.log(div1)
|
|
|
+ // }
|
|
|
+ // div2.onclick = function(){
|
|
|
+ // console.log(div2)
|
|
|
+ // div2.style.background = 'white'
|
|
|
+ // //阻止事件冒泡
|
|
|
+ // event.stopPropagation()
|
|
|
+ // }
|
|
|
+ // div3.onclick = function(){
|
|
|
+ // console.log(div3)
|
|
|
+ // //阻止事件冒泡
|
|
|
+ // event.cancelBubble = true
|
|
|
+ // }
|
|
|
+ //由内到外 是事件冒泡
|
|
|
+
|
|
|
+ //参数一 事件名称 字符串 必填项
|
|
|
+ //参数二 执行函数 必填项
|
|
|
+ //参数三 布尔值 可空
|
|
|
+ div1.addEventListener('click',function(){
|
|
|
+ console.log('我是div1')
|
|
|
+ })
|
|
|
+ div2.addEventListener('click',function(){
|
|
|
+ console.log('我是div2')
|
|
|
+ })
|
|
|
+ div3.addEventListener('click',function(){
|
|
|
+ console.log('我是div3')
|
|
|
+ })
|
|
|
+ div1.addEventListener('click',function(){
|
|
|
+ console.log('我是div1')
|
|
|
+ },true)
|
|
|
+ div2.addEventListener('click',function(){
|
|
|
+ console.log('我是div2')
|
|
|
+ },true)
|
|
|
+ div3.addEventListener('click',function(){
|
|
|
+ console.log('我是div3')
|
|
|
+ },true)
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ 从里到外 事件冒泡 false
|
|
|
+ 从外到里 事件捕获 true
|
|
|
+ 先捕获 后冒泡 先从外到里 然后从里到外
|
|
|
+ */
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub