第九周第二天笔记之事件

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元素；

       
       
       
           
           
           
       
       
       
    div1
           
    div2
               
    div3
           
       
       
       
       
    

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;
  • 实例：文本框内只能输入数字或者删除数字，其他的不能输入