对dom元素事件的知识点及方法封装

绑定事件处理函数的方法

1、ele.onxxx = function (){}

兼容性好，但是一个元素的同一事件只能绑定一个处理函数
基本等同于写在HTML行间

2、ele.addEventListener(etype,fn,false);

IE9以下不兼容。可以为一个事件绑定多个处理程序，但是如果处理函数的指向同一个函数，则只会执行一次

此时传递的参数为false，意思为事件传递机制为冒泡，如果为true则为捕获

3、ele.attachEvent('on' + etype,fn)

IE独有，一个事件可以绑定多个处理程序

//封装出一个兼容性的添加事件方法addEvent
/**
 * [addEvent 为指定元素添加事件]
 * @param {[element]} ele    [指定元素]
 * @param {[string]} type   [事件类型]
 * @param {[fn]} handle [绑定的处理函数]
 */
function addEvent(ele,type,handle){
    if(ele.addEventListener){
        ele.addEventListener(type,handle,false);
    }else if(ele.attactEvent){
        ele.attactEvent('on' + type,function(){
            handle.call(ele);
        })
    }else{
        ele['on' + type] = handle;
    }
}
      

---

解除事件处理程序

1、ele.onclick = false/""/null

2、ele.removeEventListener(type,fn,false)

3、ele.detach.Event('on' + type,fn)

如果绑定的是匿名函数，则无法解除

---

事件处理模型——事件冒泡和捕获

冒泡：结构上嵌套关系的元素，会存在事件冒泡的功能，即同一事件，子元素冒泡向父元素；

捕获：结构上嵌套关系的元素，会存在事件的捕获功能，即同一事件，自父元素向子元素捕获；
IE中没有捕获

触发顺序，如果一个元素同时存在冒泡和捕获事件，先捕获，后冒泡，点击的元素两个事件谁写在上面谁先执行

部分事件不冒泡：focus，blur，change，submit，reset，select等无法传递的事件

取消冒泡的方法

event.stopPropagation()

不支持IE9以下版本

IE独有方法 event.cancelBubble = true;

//封装一个取消冒泡的函数stopBubble(event)
/**
 * [stopBubble 取消事件冒泡]
 * @param  {[event]} event [要取消冒泡的事件]
 * @return {[type]}       [无返回值]
 */
function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

阻止默认事件

（默认事件例如：表单提交、a标签跳转、右击菜单栏）

1、return false; 以对象属性的方式注册的事件才有效 exp:ele.onclick = function (){return false;}

2、event.preventDefault();IE9以下不兼容

3、event.returnValue = false; 兼容IE

//封装一个兼容的阻止默认事件的方法
/**
 * [cancelHandler 阻止事件的默认行为]
 * @param  {[event]} event [要阻止默认行为的事件]
 * @return {[type]}       [无返回值]
 */
function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

---

事件对象

event || window.event

window.event适用于IE

事件源的对象

event.target 火狐只有这个，chrom有这个

event.srcElement IE只有这个，chrom有这个

兼容性写法:
target = event.target || event.srcElement

---

各类事件及简要介绍

鼠标事件

click , mousedown , mousemove , mouseup , contextmenu , mouseover , mouseout , mouseenter , mouseleave

mousedown + mouseup = click

用button来区分鼠标的按键，0/1/2 左键/滚轮/右键

DOM3标注规定：click事件只能监听鼠标左键，只能通过mousedown和mouseup事件来监听鼠标右键

解决mousedown和click冲突的问题，可以判断点击的事件长短，在外部添加一个blur变量，如果大于一定的值解除click事件(改变blur值)，在click事件内部判断blur值

键盘事件

keydown ， keyup ， keypress

keydown > keypress > keydown

keydown和keypress的区别：
keydown可以相应任何键盘按键，keypress只可相应字符类键盘按键
keypress返回ASCII码，可以转换为相应的字符，keydown返回规定键盘按键编号

文本操作事件

input， focus ， blur，change

input 在字符输入时候就触发
change 在文本框失去焦点时才对比前后值触发事件

窗体操作类（window上的事件）

scroll，load