第九周第二天笔记之事件

2018-09-20 本文已影响0人果木山

1 事件

1.1 事件分类

事件分为DOM0级事件和DOM2级事件
1. DOM0级事件：1）在元素的私有属性上；2）同一个元素，同一个行为，只能绑定同一个方法；如果多次绑定，后面的方法会覆盖前面的方法；3）只能发生在事件流的冒泡阶段；
  - 绑定：oDiv.onclick=function(){xxx};
  - 解绑：oDiv.onclick=null;;
2. DOM2级事件：1）在元素所属的EventTarget这个类的原型上；2）同一个元素(ele)，同一个行为(type)可以绑定多个不同的方法(fn)；3）可以人为的控制发生事件流的哪个阶段（捕获，冒泡）(userCapture=true/false)；
  - 标准浏览器(包括IE8,9)：
    - 绑定：oDiv.addEventListener(type,fn,userCapture)，如oDiv.addEventListener("click",fn,true)
    - 解绑：oDiv.removeEventListener(type,fn,userCapture)
    - 注意：默认为冒泡，true代表捕获，false代表冒泡；绑定时fn可以是匿名函数，但是解绑时fn必须是有名函数；
  - IE7,8浏览器：
    - 绑定：oDiv.attachEvent("on"+type,fn)，如oDiv1.attachEvent("onclick",fn1)
    - 解绑：oDiv.detachEvent("on"+type,fn)
    - 注意：默认为冒泡，只发生在冒泡阶段；绑定时fn可以是匿名函数，但是解绑时fn必须是有名函数；
- 元素的原型链：元素本身-> HTMLDivElement ->HTMLElement-> Element-> Node-> EventTarget-> Object

1.2 事件流

事件流：

由三部分构成：捕获 target事件源冒泡；
由两部分构成：捕获冒泡；
- 冒泡：从里向外依次触发事件，父级和祖级的该事件也都会被触发，如果父祖级上没有绑定行为和fn，就不会显现出来，但是该类事件会被触发；
- 捕获：从外向里依次触发事件，子孙级该事件也都会被触发，如果子孙级上没有绑定行为和fn，就不会显现出来，但是该类事件会被触发；
- 事件源：在触发事件时，会产生一个事件对象，而事件对象上的target和srcElement会保存住事件源元素，无论从父级还是祖级上获取事件对象的target属性，都拿到的是触发事件时的元素；
注意：触发顺序：先捕获，后冒泡；

实例验证：

知识点：
- 当点击div3时，会由里向外依次弹出div3,div2,div1;
- 当点击div2时，会由里向外依次弹出div2,div1;
- DOM0级事件只能发生在冒泡阶段
- 注：只要触发div3的点击事件，div1，div2的点击事件都会被触发，不管他俩是否添加行为，点击事件都会被触发，只不过是看不到任何响应；
- 当点击div3后，会依次弹出div3，div2，div1,然后一起打印e.target，获取的都是div3元素；

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>事件流</title>
       <style>
           div{
               padding: 100px;
               font-size: 50px;
           }
           .div1{
               background-color: red;
           }
           .div2{
               background-color: blue;
           }
           .div3{
               background-color: gold;
           }
       </style>
   </head>
   <body>
   <div class="div1">div1
       <div class="div2">div2
           <div class="div3">div3</div>
       </div>
   </div>
   <script>
       var oDiv1=document.getElementsByTagName("div")[0];
       var oDiv2=document.getElementsByTagName("div")[1];
       var oDiv3=document.getElementsByTagName("div")[2];
       oDiv1.onclick=function (e) {
           console.log("div1");
           console.log(e.target);//打印结果：<div class="div3">div3</div>
       };
       oDiv2.onclick=function (e) {
           console.log("div2");
           console.log(e);
           console.log(e.target);//打印结果：<div class="div3">div3</div>
       };
       oDiv3.onclick=function (e) {
           console.log("div3");
           console.log(e);
           console.log(e.target);//打印结果：<div class="div3">div3</div>
       };
   </script>
   </body>
   </html>

1.3 事件对象

事件类型：
- 鼠标事件：
  - onclick: 鼠标点击事件；
  - ondbclick: 鼠标双击事件；
  - onmouseover: 鼠标移上事件；
  - onmousrout: 鼠标移出事件；
  - onmouseenter: 鼠标移上事件；
  - onmouseleave: 鼠标移出事件；
  - 区别：onmouseover onmouseout onmouseenter onmouseleave四者
    - onmouseover onmouseout两者为一对，代表鼠标移入移出事件，子级会发生冒泡事件；
    - onmouseenter onmouseleave两者为一对，也代表鼠标移入移出事件，不支持冒泡事件，子级不会影响父级；
- 系统事件：
  - onload: 页面加载事件；
  - onresize: 页面大小拉伸事件；
  - onscroll: 滚轮事件；
- 键盘事件：
  - onkeydown: 键盘按下事件；
  - onkeyup: 键盘抬起事件
  - onkeypress: 键盘按下抬起事件；
- 表单事件：
  - onfocus: 表单聚焦事件；
  - onblur: 表单失焦事件；
  - autofocus: 自动聚焦，值为布尔值，true为自动聚焦，false为不自动聚焦，默认为false；
事件对象：
- 定义：当发生事件后，会向函数中传入一个实参，传入的实参为事件对象(标准浏览器)
  - 代码：oDiv.onclick=function(e){xxx}
  - 在标准浏览器下，事件发生后，会向函数传入实参，即事件对象；也可以通过window.event来获取事件对象；
  - 在IE6,7,8浏览器下，事件发生后，不会向函数传入实参，获得的形参值为undefined，所以只能通过window.event来获得事件对象；
  - 事件对象的兼容处理：e=e || window.event;
- 事件源：指的是发生事件的当前元素，等同于事件发生后，匿名函数中的this；
  - 在标准浏览器下：事件对象上存在两个属性，一个是target属性，一个是srcElement属性，通过这两个属性可以获取事件源；如：e.target或e.srcElement;
  - 在IE6,7,8浏览器下：事件对象上不存在target属性，只存在srcElement属性，只能通过srcElement属性来获取事件源；
  - 事件源的兼容处理：e.target=e.target || e.srcElement;
- 事件行为：
  - 定义：事件行为指的是添加的什么事件，如onclick事件，行为是点击行为，onkeyup事件，行为指的就是键盘抬起行为
  - 属性：type，通过事件对象上的type属性可以获取事件行为
  - 代码：e.type;如onclick事件的行为是click，onkeyup事件的行为是keyup等；
鼠标事件对象：MouseEvent
- 坐标属性：clientX clientY
  - 定义：距离当前可视区左上角的坐标，所有浏览器兼容；
  - 代码：console.log(e.clientX,e.clientY)
- 坐标属性：pageX pageY
  - 定义：距离第一屏左上角的坐标,IE浏览器(IE6,7,8)不兼容；
  - 代码：console.log(e.pageX,e.pageY)
  - 与clientX,clientY的区别：二者相差的是浏览器卷去的长度
  - 兼容处理代码：
```
 e.pageX=e.pageX || (e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft))
 e.pageY=e.pageY || (e.clientY+(document.documentElement.scrollTop || document.body.scrollTop))
```

键盘事件对象：KeyboardEvent

键盘码属性：keyCode;
- 定义：每个键盘对应一个键盘码，如：键盘0代表48，键盘9代表57，删除键backpace代表8；
- 代码：e.keyCode;
阻止默认事件兼容代码：e.preventDefault?e.preventDefault():e.returnValue=false;
实例：文本框内只能输入数字或者删除数字，其他的不能输入

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>键盘事件实例</title>
 </head>
 <body>
 <input type="text" placeholder="输入有效数字"/>
 <script>
     var oBtn=document.getElementsByTagName("input")[0];
     oBtn.onkeydown=function (e) {
         e=e ||window.event;
         if((e.keyCode<48 || e.keyCode>57) && e.keyCode!==8){
             //满足条件的清除默认事件
             e.preventDefault?e.preventDefault():e.returnValue=false;
         }
     }
 </script>
 </body>
 </html>

第九周第二天笔记之事件

1 事件

1.1 事件分类

1.2 事件流

1.3 事件对象

猜你喜欢

热点阅读