JS事件模型

DOM事件

事件：是浏览器赋予dom元素的默认行为，不管是否绑定天生就有操作

DOM0级事件绑定 dom.onxxx = function(){…}

• 给当前元素的私有属性赋值,只能赋值（绑定）一次（后面会覆盖前面）；
• 不能绑定不属于自身的事件（eg:onContentLoaded）
• 取消事件响应 dom.οnclick=null;

DOM二级事件绑定 addEventListener(‘xxx’,function(){})

• 事件池机制 （可以绑定多个）；可以处理所有标准事件，例如DOMContentLoaded只有DOM2才可以处理
• addEventListener(‘事件名不加on’,处理函数,true-捕获 false-冒泡)；
• removeEventListener(‘事件名不加on’,函数名,true-捕获 false-冒泡);
• 点击一次可以响应多次事件，按顺序执行
• 如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除
• 对dom0级事件 不会相互覆盖

IE6-8 使用 attachEvent(‘onxxx’,function(){})

• IE8只支持事件冒泡
• btn.attachEvent(‘onclick’,function(){}); //事件冒泡，只有两个参数 ，第一个参数为on+事件名
• btn.detachEvent(‘onclick’,函数名);//取消事件响应 只能取消命名函数
• 函数内部 this->window
• 点击一次可以响应多次事件，最后绑定的事件最先执行

事件对象Event

每个DOM元素对象都是 EventTarget类的实例

记录当前操作的相关信息eg:type , target，srcElement，clientX，pageX，stopPropagation() ,preventDefault()
currentTarget 可以用this 替代

坐标位置

• event.pageX event.pageY 鼠标的在页面上的位置 （以body左上角为准）
• event.clientX event.clientY 鼠标与可视区左上角的距离 （与滚动条滚动无关）
• event.screenX event.screenY 屏幕坐标位置 （以屏幕为准）

IE 与标准浏览器中事件对象的差别

• 没有 srcElement属性(事件源), pageX,pageY , stopPropagation() ,preventDefault()。
• 事件对象基于window.event获取，不是通过参数传递
• 事件源只能基于target属性获取，没有 srcElement属性(事件源)
• 阻止默认行为：returnValue:false; 阻止冒泡传播 cancelBubble:true;

跨浏览器兼容事件对象

function initEvent(ev){
	if(!ev){
		//IE6-8
		ev = window.event;
		ev.pageX = ev.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
		ev.pageY = ev.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
		ev.srcElement = ev.target;
		ev.preventDefault = function preventDefault(){
			ev.returnValue = false;
		};
		ev.stopPropagation = function stopPropagation(){
			ev.cancelBubble = true;
		};
	}
	return ev;
}
//在事件触发时，不仅通知方法执行，还会传递给当前方法一个实参：事件对象（记录本次操作相关信息的一个对象）
body.onClick = function(ev){
	ev = initEvent(ev);
}

事件传播机制

在事件传播期间，有三个阶段：捕获，目标和冒泡。 Capturing > Target > Bubbling

• 在「捕获」（capturing）阶段中，事件从window向下传播到目标元素。当事件达到「目标」（target）元素后，「冒泡」（bubbling）才开始。
• 默认情况下，事件处理程序在冒泡阶段执行（除非将useCapture设置为true）。 它从最深的嵌套元素向外延伸。

事件委托/事件代理

• 基于事件冒泡机制，把当期事件委托给外层容器，这样触发容器内任何一个元素的相关事件，都可以传播到外层容器上，触发外层容器的相关事件行为，此时基于事件源不同处理不同的事情

持续更新中~