事件

事件

事件分类

鼠标事件：

• onclick：鼠标点击事件
• onmousedown：鼠标按下
• onmousemove：鼠标移动
• onmouseup：鼠标抬起
• oncontextmenu：鼠标右键事件
• onmouseover：鼠标进入
• onmouseout：鼠标移出

通过判断 onmousedown，onmouseup 事件对象的button的值来区分是鼠标左键还是右键。

键盘事件： 不抬起连续触发

• keydown：键盘按下

• keyup：键盘抬起

• keypress：键盘事件

  keydown和keypress区别：

  • keydown可以响应任意键盘按键，keypress只可字符类键盘按键。
  • keypress返回ASCII码，可以转换成相应字符。

文本类事件：

• input：文本框内容改变触发事件
• focus：聚焦时触发
• blur：失去焦点时触发
• change：文本框聚焦和失去焦点，状态不一致时触发

如何绑定事件

1. ele.onxxx = function(event){}
//兼容性很好，但是一个元素的同一个事件只能绑定一个处理函数
//等同于直接将js代码写在行间   <div onClick = "console.log("a")" ></div>

2. obj.addEventListener(type,fn,false);  第三个参数默认是冒泡，设置为true就会变为捕获
// IE9一下不兼容，可以为一个事件绑定多个处理函数，按照绑定的顺序去执行

3. obj.attachEvent('on'+type,fu)
// IE 独有，一个事件同样可以绑定多个处理程序 

解绑事件

ele.onclick = false/''/null

ele.removeEventListener(type,fu,false)

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

注：若绑定匿名函数，则无法解除

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

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

事件捕获： 跟事件冒泡刚好相反，同一事件自父元素捕获至子元素（事件源对象）。

IE没有事件捕获

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

focus blur change sumbit reset select等事件不冒泡

取消冒泡和阻止默认事件

事件对象，上面记载了该事件发生时的关键性信息。

// 取消冒泡
event.stopPropagation() || event.cancelBubble = true  //不支持ie9一下

//IE独有 但是谷歌也实现了
event.cancelBubble = true

//阻止默认事件
//默认事件： 表单提交，a标签跳转，右键菜单等。
 
1. return false //只有对象属性绑定事件的方式才生效

2. event.preventDefault()  //IE9一下不兼容

3. event.returnValue = false //兼容IE

事件对象

事件对象，上面记载了该事件发生时的关键性信息。

event || window.event 用于IE

事件源对象：

• event.target 火狐只有这个
• event.srcElement IE只有这个
• chrome 这两都有

事件委托： 基于事件的冒泡机制，和事件源对象进行处理。