这是我参与「第四届青训营」笔记创作活动的第15天，学习内容为《高级事件》

1、能够写出元素注册事件的两种方式

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

传统注注册方式

1、利用on开头的事件onclick

2、<button onclick="alert("hi~")">

btn.onclick = function(){}

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数

方法监听注册方式

w3c标准，推荐方式

addEventListener()它是一个方式

IE9之前的IE不支持此方法，可使用attachEvent（）代替

特点：同一个元素同一个事件可以注册多个监听器

1.2 addEventListener事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接受三个参数：

type：事件类型字符串，比如click，mouseover,注意这里不要带on

listener:事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认是false，学完DOM事件流后，我们再进一步学习

attachEvent 非标准 不要在生产环境使用

eventTarget.attachEvent(eventNameWithOn,callback)

eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接受两个参数：

eventnameWithOn:事件类型字符串，比如onclick,onmouseover,这里要带on

callback：事件处理函数，当目标触发事件时回调函数被调用。

注册事件兼容性解决方案

//判断当前游览器是否支持addEventListener方法

if(element.addEventListener){

element.addEventListener(eventName fn); // 第三个参数，默认是false

}else if (element.attachEvent){

element.attachEvent('on'+eventName,fn)

}else{

// 相当于 element.onclick = fn

element['on'+eventName] = fn;

}

}

兼容性处理原则：首先照顾大多数游览器，再处理特殊游览器

2、能够说出删除事件的两种方式

2.1 传统注册方式

eventTarget.onclick = null

2.2 方法监听注册方式

eventTarget.removeEventListener(type,listener[,useCapture])

eventTarget.detachEvent(eventNameWithOn,callback)

3、能够说出DOM事件流的三个阶段

事件流描述的是从页面中接受事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段

1、捕获阶段

2、当前目标阶段

3、冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受过程。

1、JS代码中只能执行捕获或者冒泡其中的一个阶段

2、onclick和attachEvent只能得到冒泡阶段

3、addEventListener（type，listener[,useCapture])第三个参数如果是true，表示事件捕获阶段调用事件处理程序，如果是false（不写默认就是false）表示在事件冒泡阶段调用事件处理程序。

4、实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

5、有些事件是没有冒泡的，比如onblur,onfocus,onmouseenter,onmouseleave

6、事件冒泡有时候会带来麻烦，有时候会帮助很巧妙地做某些事情。

事件对象

1.event 就是只有一个事件对象 写到我们侦听函数的小括号里面当形参来看

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

3.事件对象 是 我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标相关信息，鼠标坐标啊，如果是键盘事件里面就包含

的键盘事件的信息 比如 判断用户按下了那个键

4、这个事件对象我们可以自己命名，比如event、evt、e

5、事件对象也有兼容性问题 ie678通过window.event 兼容性问题 e = e ||

var div = document.querySelector('div')

div.onclick = function(e){

console.log(e)

console.log(window.event)

e = e || window.event; // 如果e为真，就执行e，如果e为假，就会执行后面的window.event

}

div.addEventListener('click',function(e){

console.log(e)

})

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单理解：事件发生后，跟事件相关的一系列信息数据的集合，都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

1、谁绑定了这个事件

2、鼠标触发事件的话就会得到鼠标相关信息，如鼠标位置

3、键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

4、能够利用时间对象完成跟随鼠标案例

4. 事件对象

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

e.target 返回触发事件的对象 标准

e.srcElement 返回触发事件的对象 非标准 ie6-8使用

e.type 返回事件的类型，比如click mouseover 不带on

e.cancelBubble 该属性阻止冒泡 非标准ie6-8使用

e.returnValue该属性阻止默认事件 （默认行为）非标准ie6-8使用 比如不让链接跳转

e.preventDefault() 该属性阻止默认事件（默认行为） 标准 比如不让链接跳转

e.stopPropagation() 阻止冒泡 标准

// 1. e.target 返回的是触发事件对象（元素） this返回的是绑定事件的对象（元素）

阻止事件冒泡

阻止事件冒泡的两种方式

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

事件冒泡本身的特性，会带来的坏处，也会带来好处，需要我们灵活掌握

标准写法：利用事件对象里面的stopPropagation()方法

5、能够封装阻止冒泡的兼容性函数

阻止事件冒泡的兼容性解决方案

e.stopPropagation()

}else{

window.event.cancelBubble = true

}

6、能够说出事件委托的原理

事件委托（代理，委托）

事件委托也称为事件代理，在jQuery里面称为事件委派

事件委托的原理： ****** ****（必考）

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

以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

事件委托的作用

我们只操作了一次DOM，提高程序性能

7、能够说出常用的鼠标和键盘事件

常用的鼠标事件

不给别人复制文字

1、禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

我们可以禁用右键

document.addEventListener('contextmenu',function(e){

e.preventDefault()

})

2、禁止鼠标选中 (selectstart)

常用鼠标事件对象

event对象代表事件的状态 跟事件相关的

鼠标事件对象

e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标

e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标

e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持 重点记住

e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持 重点记住

e.screenX 返回相对于电脑屏幕的X坐标

e.screenY 返回相对于电脑屏幕的Y坐标