绑定事件处理函数的方法
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 在文本框失去焦点时才对比前后值触发事件
