一、事件高级

一、注册事件（绑定事件）

给元素添加事件，两种方式：

1. 传统方式：onclick等

同一个元素同一事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

2. 方法监听注册方式：w3w标准 推荐方式

• addEventListener()是一个方法
• IE9之前不支持EventListener()
• 同一个元素同一个事件可以注册多个监听器，按注册顺依次执行

例如：

btns[1].addEventListener('click' , function(){

alert('hi');

})

二、删除事件（解绑事件）

1. 传统注册方式evenTarget.onclick = null；

2. 方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]); eventTarget.detachEvent(eventNameWithOn, callback);

三、DOM事件流（重点）

事件传播的过程叫DOM事件流

•  JS代码中只能执行捕获或者冒泡其中的一个阶段
• onclick和attachEvent只能得到冒泡阶段
• addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
• 实际开发中更关注事件冒泡
• 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

四、事件对象（重点）

• 事件对象写在监听函数的小括号里 当形参看
• 只有有了事件才会存在 是系统自动创建的 不需要我们传递参数
• 是实践的一系列相关数据的集合 跟事件相关的 比如鼠标点击里包含了鼠标相关的信息
• 可以自己命名 event、evt、e
• ie678通过window.event 兼容性写法：e = e || window.event

 1. 事件对象的常见属性和方法

属性不加括号 方法要加括号！！！

• e.target 和 this 的区别：   this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）   e.target 是事件触发的元素（点了哪个返回哪个）。
•      a.addEventListener('click',function(e){

            e.preventDefault();  //DOM标准写法 阻止链接跳转

        })

五、阻止事件冒泡（重点）

事件冒泡：开始时由具体的元素接收 然后逐级向上传播到DOM最顶层节点

• 标准写法：利用事件对象里面的 stopPropagation()方法  e.stopPropagation()
• 非标准写法：IE 6-8  利用事件对象 cancelBubble 属性  e.cancelBubble = true;

六、事件委托（代理、委派）

jQuery里成为事件委派

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

七、常用的鼠标事件（看.html实例）

1. 禁止鼠标右键菜单  contextmenu 

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

2. 禁止鼠标选中  selectstart

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

3. 鼠标事件对象 MouseEvent

• 1，2注意是可视区范围内 
• 3，4是相对于页面文档的距离

八、常用的键盘事件

•  用监听addEventListener 记得去掉on
• keypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
• 三个事件的执行顺序是： keydown --  keypress  --- keyup

• onkeydown 和 onkeyup  不区分字母大小写，onkeypress 区分字母大小写。
• 实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
• Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值 

 ！！！京东快递单查询.html！！！