WD7.2事件（下）

事件

事件流：

               1.概念：事件从开始触发到结果的过程；

               2.W3C标准浏览器中

           捕获阶段——从外向内找目标的过程

           目标阶段——找到了目标元素，执行其他的事件

           冒泡阶段——从内向外离开目标元素的过程——除了目标元素以外的元素，其他的事件会在冒泡阶段执行

                3.IE8及其以下浏览器中【只有 目标阶段 和 冒泡阶段】

事件绑定：

  绑定方式——元素.addEventListener(事件类型，函数，布尔值)

     优点：1.同类型事件可以绑定多次；2.可以让元素的事件在捕获阶段执行

     缺点：1.在IE8以下不兼容；2.元素.attachEvent(on事件类型，函数)

通用的绑定方式：【语法】

function bindEvent(ele,type,handler){

if(ele,addEventListener){

ele.addEventListener(type,hander)

}else if(ele.attchEvent){

ele.attachEvent('on' + type,handler)

}else{

ele['on'+ type] = handler

}

}

通用的解绑方式:

! 什么叫解绑？——将绑定的事件删除/清除；

！为什么要解绑？

  事件的绑定，其实就是将事件存储在内存中；事件执行以后，并不会销毁【内存浪费】

【语法】

function unBind(ele,type,handler){

if(ele.removeEventListener){

ele.removeEvenListener(type,handler)

}else if(ele.datachEvent){

ele.detachEvent('on' + type,handler)

}else{

ele['on'+type] = null

}

}

事件对象：

概念——系统在调用事件函数的时候，传入了一个实参，是一个对象

如何获取事件对象【语法】

  事件函数（e）{

     var e = e || window.event

}

作用：

1.获取事件类型——e.type

2.获取鼠标按键信息——e.button[0是左键  1是滚轮  2是右键]

3.获取键盘码

  var keycode = e.keyCode || e.which

• 回车 13
• 空格  32
• 上左右下  37 38 39 40
• 字母数字都是对应的阿斯克码

  组合键

• e.shiftKey
• e.ctrlKey 【布尔值，表示是否按住这个键】
• e.altKey

阻止默认行为

什么是默认行为——有点行为，不用js代码，也有默认的效果——a点击就能跳转，form，鼠标右击；

【语法】e.preventDefault?e.prevenDefault():e.returnValue=false

阻止事件冒泡

 什么是冒泡——除了目标以外的元素，他们的事件默认在冒泡阶段会执行

【语法】e.stopPropagation?e.stopPropagation():e.cancelBubble=true

事件委托

 什么叫事件委托——将所有子元素的事件交给父元素去处理；

e.target || e.srcElement——获取精准的目标元素

节点.nodeName

节点.tagName[大写的标签名，用于判断当前是哪个标签]