|
|
@@ -0,0 +1,85 @@
|
|
|
+<!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>
|
|
|
+ #div1{
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: antiquewhite;
|
|
|
+ }
|
|
|
+ #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(e){
|
|
|
+ // console.log('div2')
|
|
|
+ // // e.preventDefault()
|
|
|
+ // //阻止事件冒泡
|
|
|
+ // e.stopPropagation()
|
|
|
+ // }
|
|
|
+ // div3.onclick = function(){
|
|
|
+ // console.log('div3')
|
|
|
+ // //阻止事件冒泡
|
|
|
+ // event.cancelBubble = true
|
|
|
+ // }
|
|
|
+ //事件冒泡 从里到外执行
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ 参数1 事件名称 字符串 必填
|
|
|
+ 参数2 执行函数 必填
|
|
|
+ 参数3 布尔值
|
|
|
+ */
|
|
|
+ div1.addEventListener('click',function(){
|
|
|
+ console.log('div1')
|
|
|
+ },false)
|
|
|
+ div2.addEventListener('click',function(){
|
|
|
+ console.log('div2')
|
|
|
+ },false)
|
|
|
+ div3.addEventListener('click',function(){
|
|
|
+ console.log('div3')
|
|
|
+ },false)
|
|
|
+ div1.addEventListener('click',function(){
|
|
|
+ console.log('div1')
|
|
|
+ },true)
|
|
|
+ div2.addEventListener('click',function(){
|
|
|
+ console.log('div2')
|
|
|
+ },true)
|
|
|
+ div3.addEventListener('click',function(){
|
|
|
+ console.log('div3')
|
|
|
+ },true)
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ 从里到外 事件冒泡 fasle
|
|
|
+ 从外到里 事件捕获 true
|
|
|
+ 先捕获 后冒泡 先从外到里 然后从里到外
|
|
|
+ */
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub