十七、事件

1、事件流

1.1事件冒泡

	事件从被点击的元素最开始触发，然后沿着DOM树往上依次触发到document对象

1.2事件捕获

事件从document元素开始，沿着DOM树向下传播，直至目标元素。

1.3DOM事件流

事件捕获+到达目标+事件冒泡

2.事件处理程序

用户或者浏览器执行某种动作

2.1HTML事件处理程序

<button onClick="console.log(this.value)" value="click me"/>

不能直接使用未转义的HTML格式字符
作用域链通过with被扩展

function (){
	with(document){
		with(this.form){
			with(this){
			...
			}
		}
	}
}

2.2DOM0事件处理程序

讲一个函数赋值给DOM元素的一个事件处理属性上

var btn = document.getElementById('myBtn');
btn.onclick = function (){console.log('click')};

2.3 DOM2事件处理程序

addEventListener(type, handler, runAtCapture=false);
removeEventListener(type, handler, runAtCaptrue);

2.4 IE事件处理程序

attachEvent(type, handler)// type starts with 'on', such as onClick
detachEvent(type, handler)
// 采用事件冒泡

2.5 跨浏览器事件处理程序

var EventUtil = { 
	 addHandler: function(element, type, handler) { 
		 if (element.addEventListener) { 
		 	element.addEventListener(type, handler, false); 
		 } else if (element.attachEvent) { 
		 	element.attachEvent("on" + type, handler); 
		 } else { 
		 	element["on" + type] = handler; 
		 } 
	 }, 
	 removeHandler: function(element, type, handler) { 
		 if (element.removeEventListener) { 
		 	element.removeEventListener(type, handler, false); 
		 } else if (element.detachEvent) { 
		 	element.detachEvent("on" + type, handler); 
		 } else { 
		 	element["on" + type] = null; 
		 } 
	 } 
}; 

3.事件对象

3.1 DOM事件对象

在DOM合规的浏览器中，event是传给事件处理程序的唯一参数

属性/方法	类型	说明
bubbles	boolean	表示事件是否可以冒泡
cancelable	boolean	事件是否可以取消默认行为
currentTarget	Element	当前处理程序所在元素
defaultPrevented	Boolean	是否已经调用过preventDefault()
detail		其他相关信息
eventPhase	int	事件所处阶段 1捕获 2到达目标 3冒泡
preventDefault()	Function	取消默认行为
stopImmediatePropagation()	Function	取消后续所有事件捕获或者冒泡
stopPropagation()		取消后续事件的捕获或者冒泡，bubbles为true时可用
target	Element	事件目标元素
trusted	boolean	true表示事件是浏览器生成的，false表示是开发者创建的
type	string	事件类型
view	AbstractView	与事件相关的抽象视图，即事件发生的window对象

在事件处理程序内部，this始终等于currentTarget,而target则是指事件的实际目标

3.2 IE事件对象

如果是按照DOM0方式指定事件处理程序，则event是window的一个属性；如果是通过“attachEvent/detachEvent”指定，则event是回调函数唯一参数

属性/方法	类型	说明
cancelBubble	boolean	默认为false, 设置为true时取消冒泡
returnValue	boolean	默认为true，设置为false取消事件默认行为
srcElement	Element	与target相同
type	string	类型

由于作用域取决于指定方式，所以this并不总是等于事件目标，建议使用srcElement代替this

4.事件类型

	说明
UIEvent	与BOM交互	DOMActivate、load、unload、abort、error、select、resize、scroll
FocusEvent	获得和失去焦点	blur,DOMFocusIn,DOMFocusOut,focus,focusin, focusout
MouseEvent	鼠标事件	click,dblclick,mousedown, mouseenter, mouseleave, mouseout, mouseover, mouseup
WheelEvent	滚轮事件
InputEvent	输入事件
KeyboardEvent	键盘事件	keyDown, keyPress, keyup
CompositionEvent	在使用某种IME输入字符时的事件	compositionstart, compositionend, compositionupdate

abort：在<object>元素上当相应对象加载完成前被用户提前终止下载时触发。
select：在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发

客户端坐标：event.clientX/event.clientY
页面坐标：event.pageX/event.pageY
屏幕坐标：event.screenX/event.screenY
键盘修饰键：event.shiftKey/ctrlKey/altKey/metaKey

HTML5事件

contextmenu

显示上下文菜单事件

beforeunload

页面被卸载之前，在window上会被触发

DOMContentLoaded

页面完全加载后触发

readystateChange

文档或者元素的加载状态发生变化时触发，readyState的属性值有
uninitialized、loading、loaded、interactive、complete

pageShow pageHide(firefox)

hashchange

h5新增，必须添加给window

设备事件

orientationchange 事件

判断设备是垂直模式还是水平模式

deviceorientation 事件

devicemotion事件

5.内存与性能

5.1事件委托

5.2删除事件处理程序

6.模拟事件

通过js在任意时刻触发任意类型事件

DOM事件模拟

let event = document.createEvent(eventType)
target.dispatchEvent(event)

IE事件模拟

var btn = document.getElementById("myBtn"); 
// 创建 event 对象
var event = document.createEventObject(); 
/// 初始化 event 对象
event.screenX = 100; 
event.screenY = 0; 
event.clientX = 0; 
event.clientY = 0; 
event.ctrlKey = false; 
event.altKey = false; 
event.shiftKey = false; 
event.button = 0; 
// 触发事件
btn.fireEvent("onclick", event);