JS（16）事件相关

1.注册事件（绑定事件）

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

1.1.addEventListener 事件监听方式

-- eventTarget.addEventListener(type,listener[,userCapture])
-- 此方法将指定的监听起注册到eventTarget（目标对象）上，当该对象触发指定事件时，就会执行事件处理函数。
	-- type：事件类型字符串，比如：click，mouseover，注意：这里没有on
	-- listener：事件处理函数，事件发生时，会调用该监听函数
	-- userCapture：可选参数，是一个布尔值，默认是false

2.删除事件（解绑事件）

2.1.删除方式

-- 传统方式
	eventTarget.onclick = null;
-- 方法监听注册方式
	eventTarget.removeEventListener(Type,listenet[,userCapture])
	eventTarget.detachEvent(eventNameWithon，callback) IE9之前

3.DOM事件流

-- 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
-- DOM事件流分为3个阶段
	1.补捕获阶段
	2.当前目标阶段
	3.冒泡阶段
注意：1.onclick和attachEvent只能得到冒泡阶段
	 2.addeventListener() ，如果第三个参数是true，在捕获阶段调用事件处理函数
	 						如果第三个参数是false，在冒泡阶段调用事件处理函数
-- 实际很少使用捕获，更关注冒泡
	有些事件没有冒泡，比如：onblue，onfocus，onmouseenter，onmouseleave

4.事件对象

1.event 就是一个事件对象，写到我们侦听函数的小括号里面，当形参来看
2.事件对象只要有了事件，就会存在，系统自动创建，不需要传参
3.事件对象是我们事件的一系列相关数据的集合，跟事件相关的
4.这个事件对象可以自己命名
5.兼容性写法 e = event｜｜window.event

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

事件对象属性方法	说明
e.target	返回触发事件对象
e.srcElement	返回触发事件的对象 ie6-8使用
e.type	返回事件的类型，比如click，mouseover，不带on
e.cancelBubble	该属性阻止冒泡，ie6-8使用 = ture
e.returnValue	阻止默认事件，ie6-8使用，比如不让连接跳转
e.preventDefault	阻止默认事件
e.stoppropagation	阻止冒泡

注意：
1.e.target点击了那个元素，就返回那个元素
2.this那个元素绑定了这个点击事件，就返回那个元素
3.可以利用return false 也能阻止默认行为，没有兼容性问题
     特点：return 后面的代码不执行了,而且只限于传统的注册方式。

5.事件委托

原理：将监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

6.contextmenu 禁用右键菜单

doucument.addEvelentListener('contextmenu',function(e){
	e.preventDefault()
})

7.selectstart 禁用选中文字

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

8.常用的鼠标事件

鼠标事件对象	说明
e.clientX	返回鼠标相当于浏览器窗口可视区的X坐标
e.clcentY	返回鼠标相当于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标，IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

9.常用的键盘事件

键盘事件	触发条件
onkeyup	按键松开时触发
onkeydown	按下时触发
onkeypress	按下触发，不识别功能键ctrl，shift，箭头

10.键盘事件对象

keyCode		返回该键的ASCII值

注意⚠️：
  1.onkeydown和onkeyup，不区别字母大小写，onkeypress区分字母大小写，
  2.在开发中，更多的调用keydown和keyup，它能识别所有键keypress不识别的功能键，但是区分大小写。