事件

事件

事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。

绑定事件处理函数

1. ele.onxxxx = function(event){}
   兼容性很好，但是一个元素的同一事件上只能绑定一个
   基本等同于写在HTML行间上
2. obj.addEventListener(type,fn,false)
   IE9一下不兼容，可以为一个事件绑定多个处理程序
3. obj.attachEvent(‘on’ + type, fn);
   IE独有，一个事件同样可以绑定多个处理程序

事件处理程序的运行环境

1. ele.onxxx = function (event){}
   程序this指向是dom元素本身。
   //谁点击，this就指向它。
2. obj.addEventListener(type,fn,false);
   程序this指向是dom元素本身
3. obj.attachEvent(‘on’ + type, fn);
   程序this指向window

给一个对象封装一个事件处理函数

function addEvent(elem , type, handle){
    if(elem.addEventListener){
        elem.addEventListener(type,handle,false)
    }else if(elem.attachEvent){
        elem.attachEvent('on' + type, function(){
            handle.call(elem)
        })
    }else{
        elem['on' + type] = handle;
    }
}

解除事件处理程序

1. ele.onclick = false/’’/null;
2. ele.removeEventListener(type, fn, false);
3. ele.detachEvent(‘on’ + type, fn)
   注意：若绑定匿名函数，则无法解除绑定

事件处理模型，事件冒泡、捕获

事件冒泡：

1. 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获

1. 结构上（非视觉上）嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
2. IE没有捕获事件

触发顺序，先捕获，后冒泡

不会触发冒泡事件的方法

1. focus
2. blur
3. change
4. submit
5. rest
6. select

取消冒泡和阻止默认事件

取消冒泡

1. W3C标准event.stopPropagation(),不支持IE9以下版本
2. IE独有的，event.cancaleBubble = true;
3. 封装取消冒泡的函数stopBubble(event)

function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

阻止默认事件

1. 默认事件—表单提交，a标签跳转，右键菜单等
2. return false;以对象属性的方式注册的时间才生效
3. Event.preventDefault();W3C标准,IE9以下不兼容
4. event.returnValue = false;兼容IE
5. 封装阻止默认事件的函数 cancelHandler(event)

function canceHandler(event){
    if(event.preventDefault){
        event.preventDefaule();
    }else{
        event.returnValue = false;
    }
}

事件对象

1. event || window.event 用于IE
2. 事件源对象：
   event.target 火狐只有这个
   event.srcElement IE只有这个
   谷歌浏览器都有
3. 兼容性写法，方法

ele.onclick = function(e){
    var event = e || window.event;
    var target = event.target || event.srcElement;
}

事件委托

利用事件冒泡，和事件源对象进行处理

优点：

1. 性能不需要循环所有的元素一个个绑定事件
2. 灵活，当有新的子元素时不需要重新绑定事件

鼠标事件

click
鼠标点击之后
mousedown
鼠标按键事件
mousemove
鼠标移动事件
mouseup
区分鼠标按键
contextmenu
右键菜单事件
mouseover
鼠标放入区域
mouseout
鼠标离开区域
mouseenter
鼠标放入区域
mouseleave
鼠标离开区域

用button来区分鼠标的按键，0/1/2

DOM3标准规定:click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

解决mousedown和click的冲突

键盘事件

1. keydown
   按下键盘触发
2. keyup
   松开键盘触发
3. keypress
   按住连续触发
   keydown>keyoress>keyup
4. keydown 和 keypress的区别
5. keydown 可以响应任意键盘按键，keypress只可以响应字符类键盘按键
6. keypress返回ASCLL码，可以转换成相应字符。
7. oninput监测输入框输入事件
8. onchange输入框聚焦输入再离开的时候触发
9. onfouce当聚焦的时候触发
10. onscroll鼠标滚动条滚动触发
11. onload当文档解析完之后所有页面全部渲染完之后再触发