|
|
@@ -0,0 +1,111 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box1{
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ .box2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: blue;
|
|
|
+ }
|
|
|
+ .box3{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: green;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box1">
|
|
|
+ <div class="box2">
|
|
|
+ <div class="box3"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var box1 = document.querySelector(".box1");
|
|
|
+ var box2 = document.querySelector(".box2");
|
|
|
+ var box3 = document.querySelector(".box3")
|
|
|
+ // 绑定事件
|
|
|
+ box1.onclick = function(){
|
|
|
+ console.log("box1");
|
|
|
+ }
|
|
|
+ box2.onclick = function(event){
|
|
|
+ console.log("box2");
|
|
|
+ // 阻止事件冒泡 stopPropagation()方法
|
|
|
+ event.stopPropagation();
|
|
|
+ }
|
|
|
+ box3.onclick = function(event){
|
|
|
+ console.log("box3");
|
|
|
+ // 阻止事件冒泡 stopPropagation()方法
|
|
|
+ // event.stopPropagation();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 阻止事件默认行为
|
|
|
+ var doc = document.documentElement;
|
|
|
+ doc.oncontextmenu = function(event){
|
|
|
+ // return false;
|
|
|
+ // 阻止事件默认行为 preventDefault()方法
|
|
|
+ event.preventDefault();
|
|
|
+ console.log(event);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 事件冒泡： 默认情况下事件触发从当前元素开始逐层向外依次触发
|
|
|
+
|
|
|
+
|
|
|
+ // addEventListener 后面有三个参数 第一个事件名称 第二个事件处理函数 第三个参数是布尔值 如果为true 则事件捕获 否则事件冒泡
|
|
|
+
|
|
|
+ // 事件冒泡： 事件从当前元素开始逐层向外依次触发
|
|
|
+ // 事件捕获： 事件从当前元素开始逐层向内元素依次触发
|
|
|
+
|
|
|
+ // addEventListener 可以为一个元素绑定多次事件
|
|
|
+
|
|
|
+
|
|
|
+ // box1.addEventListener("click",function(){
|
|
|
+ // console.log("box1");
|
|
|
+ // },true)
|
|
|
+ // box2.addEventListener("click",function(){
|
|
|
+ // console.log("box2");
|
|
|
+ // },true)
|
|
|
+ // box3.addEventListener("click",function(){
|
|
|
+ // console.log("box3");
|
|
|
+ // },true)
|
|
|
+
|
|
|
+
|
|
|
+ // box1.addEventListener("click",function(){
|
|
|
+ // console.log("box1");
|
|
|
+ // },false)
|
|
|
+ // box2.addEventListener("click",function(){
|
|
|
+ // console.log("box2");
|
|
|
+ // },false)
|
|
|
+ // box3.addEventListener("click",function(){
|
|
|
+ // console.log("box3");
|
|
|
+ // },false)
|
|
|
+
|
|
|
+ // 当同时触发捕获和冒泡那么 先执行捕获再执行冒泡
|
|
|
+
|
|
|
+ // 清除事件
|
|
|
+ // 如果使用的是on 绑定的事件本质就是赋值操作只要将事件处理函数赋值为null 就可以清除事件了
|
|
|
+ // box1.onclick = function(){
|
|
|
+ // console.log("box1");
|
|
|
+ // }
|
|
|
+ // box1.onclick = null;
|
|
|
+
|
|
|
+ // function foo(){
|
|
|
+ // console.log("box1");
|
|
|
+ // }
|
|
|
+ // box1.addEventListener("click",foo)
|
|
|
+
|
|
|
+ // 如果使用的是addEventListener 绑定的事件可以用removeEventListener 方法来清除事件的（注：removeEventListener 方法的参数必须和addEventListener内的参数一样）
|
|
|
+
|
|
|
+ // box1.removeEventListener("click",foo)
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
