JS-Event.md

#JS-事件总结

###DOM事件流

事件流分为三个阶段
	1. 捕获阶段: 由文档逐级向下直到具体的事件发生元素
	2. 目标阶段: 我也不知道它干了啥
	3. 冒泡阶段: 由事件发生元素逐级向上升到文档元素

###DOM0事件模型

eg.  element.onclick = function(e){}
	 element.onclick = null;
1. 后注册事件会覆盖之前注册事件
2. IE8以下 使用window.event IE8以上会传入event参数， w3c浏览器正常

###DOM2事件模型

eg. w3c浏览器&&IE8以上  支持捕获与冒泡 
	element.addEventListener('事件名'， function(e){},true/false);
	element.removeEventListener('事件名'， EventHandle, true/false);
	
	IE8 
	element.attachEvent('on'+'事件名'， function(e){})
	element.detachEvent('on'+'事件名'， EventHandle)

	1. 同一元素可添加多个事件， 事件响应顺序以注册顺序为准， IE8事件响应顺序是注册顺序反序

DOM0与DOM2事件可以混用, 事件响应顺序以注册顺序为准, IE8 DOM0先发生，之后注册顺序逆序响应事件

###事件对象

eg. element.onclick = function(e){}

	function getEvent(e) {
		//IE8 下 event不做参数传入函数
		return e?e:window.event;
	}


	1. currentTaret & target
		-currentTarget  指 处理响应事件的element   currentTarget == this;
		-target  指 触发事件的element


	2. 事件的默认行为
		-preventDefault()
			IE8及以下没有preventDefault
			阻止默认事件: event.returnValue = false;
		-stopPropagation();
			IE8 没有stopPropagation
			阻止事件冒泡: event.cancelBubble = true;
    3. target & srcElement
		-IE8 srcElement
		-其他 target
	4. clientX& clientY
		- 鼠标指针相对于可视区中的水平clientX和垂直clientY坐标
	5. pageX& pageY
		- 鼠标指针相对于页面坐标的pageX与pageY位置
		- IE8不支持pageX,Y  通过scrollLeft, scrollTop 计算
	6. screenX& screenY
		- 鼠标指针相对于页面坐标的screenX, screenY位置

	7. charCode & keyCode
		- keypress事件时 才包含值
		- IE8以下不支持charCode 可用keyCode代替

###事件类型

	1. UI事件
	2. load事件
		- IE8以下不支持 scirpt 的load事件	
	3. 焦点事件 
		- 事件不冒泡
		- 元素获得(focus)或失去焦点(blur) 触发
	4. 鼠标事件
		- click, dbclick, mousedown, mouseenter, mousemove, mouseout, mouseover, mouseup
		- mouseleave, mouseenter 不冒泡
		- mouseleave, mouseenter relatedTarget属性
		
			function getRelatedTarget(event){
		        if (event.relatedTarget){
		            return event.relatedTarget;
		        } else if (event.toElement){
		            return event.toElement;
		        } else if (event.fromElement){
		            return event.fromElement;
		        } else {
		            return null;
		        }
		    }
	5. 鼠标滚轮事件

###HTML5 事件

	1. contextmenu  阻止默认菜单
	2. beforeunload 页面卸载前提示
		//IE FF
		event.returnValue = message;
		//chrome safari    		
		return message;
	3. hashchange 
		- 事件需添加至window

	4. orientationchange
		- 事件需添加至window

	5. 移动端事件
		1. touchstart
		2. touchmove
		3. touchend
		4. touchcancel