[js]事件及事件流

注册事件

注册事件也称为绑定事件，有两种方式：传统方式和方法监听注册方式
传统方式：

• on开头的事件
• 特点：注册事件唯一，同一个元素只能设置一个处理函数。最后注册的函数会覆盖之前的

方法监听注册方式：
addEventListener(type,listener[, useCapture])：(IE9后才支持)

• type：事件类型，如click、mouseover(不带on)
• listener：事件处理函数，事件发生时调用的监听函数
• useCapture：可选参数，布尔值，默认是false，表示处于冒泡阶段(先执行最内的事件)，为true表示处于捕获阶段。

删除事件(解绑事件)

传统方式：element.onclick = null;
方法监听注册方式：element.removeEventListener(type、listener、useCapture)

DOM事件流

事件对象

• div.onclick = function(ever){}：event就是一个事件对象，写到监听函数的小括号里，当形参来看
• 事件对象只有有了事件才会存在，它是系统自动创建的，不需要我们传递参数
• 事件对象包含了时间的一系列相关数据
• 有兼容性问题，ie678需要通过window.evevt来获取。可用event = event || window.event

var boxs2 = document.querySelectorAll('.box');        
box2.onclick = function(e){            
	console.log(e)        
}

e.target：点击哪个元素就返回什么
this：谁绑定了就返回谁

事件委托

原理：
不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡设置每个子节点。

鼠标事件

1、禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。
禁用右键菜单

document.addEventListener('contextmenu',function(e){            		 e.preventDefault();        })

禁止鼠标选中

 document.addEventListener('selectstart',function(e){            e.preventDefault();        })

鼠标事件对象MouseEvent

client：返回鼠标在可视区的x，y

键盘事件

三个事件的执行顺序：onkeydown—onkeypress—onkeyup

键盘事件对象

keycode：返回按下键盘的ASCII码值
keyup和keydown事件不区分大小写，a和A得到的都是65
keypress事件区分大小写。

keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。keyup事件出发的时间，文字已经落入文本框里面