绑定事件

事件的绑定方式具体见跟着艾文一起学前端-第15篇-JavaScript - DOM

addEventListener 和 attachEvent 两种绑定事件的区别:

移除元素的绑定事件（和添加绑定的方式对应）

方式1. 使用.on事件名称注册的事件，只需要将其事件指向设置为null

对象.on事件名称 = null;

 eleObj.onclick = null;

方式2. 使用addEventLister方式注册的事件，需要removeEventListener(没有on的事件类型名称, 命名的事件处理函数的名称 , false);

采用该方式进行事件解绑时，要注意，注册绑定事件时必须是命名函数，不可以是匿名函数

方式3. 使用attachEvent方式绑定的事件解绑需要使用detachEvent(有on的事件类型名称，命名的时间处理函数的名称);

解绑事件的原则，怎么绑定的就怎么解绑，兼容代码如下：

function setEventListener(element , eventType , fuc){
	if(element.addEventLister){//判断有没有addEventLister这个方法，有的话直接调用
		element.addEventListener(eventType,fuc,false);
	}else if(element.attachEvent) {
		element.attachEvent("on"+eventType,fuc);
	}else {
		element["on"+eventType] = fuc;
	}
}
//调用此方法解绑的前提要使用上面的方法进行绑定
function removeEventListener(element , eventType , fuc){
	if(element.removeEventListener){//判断有没有removeEventLister这个方法，有的话直接调用
		element.removeEventListener(eventType,fuc,false);
	}else if(element.detachEvent) {
		element.detachEvent("on"+eventType,fuc);
	}else {
		element["on"+eventType] = null;
	}

}

事件的三个阶段

可以通过事件处理函数中的参数对象的属性来判断即event.eventPhase它的取值为1，2，3分别对应的是三个阶段：

• 1 - - 事件捕获 从父元素到子元素，所以可以理解为从外向内；
• 2 - - 事件目标
• 3 - - 事件冒泡 从子元素向父元素扩散，即从里向外；addEventlistener(“无on的事件类型名称”,事件处理函数, false); false 是冒泡阶段- - 相同的事件从内向外一次冒泡发生。true是捕获阶段- - 嵌套关系元素相同的事件由外向内依次发生。

事件冒泡

当多个嵌套的元素都注册了相同的事件，如果子元素的该事件触发了，父元素的该事件也会相应的自动触发。这种现象被叫做是事件冒泡。

阻止事件冒泡的方式：

1. IE8、Chrome支持但是Firefox不支持： window.event.cancelBubble = true;

2. FireFox、 Chrome支持，IE8不支持：给事件添加事件处理参数，通过事件处理参数对象 event.stopPropagation(); 因为IE8中没有事件处理参数对象，这里的event其实就是上面的window.event；但是这里的event在IE8中是不存在的。

兼容事件处理参数对象的一段代码 ,以获取鼠标在当前页面移动时动态的获取它的坐标点为例：

document.onmousemove = function(e){
	//因为IE8 里是没有事件参数对象e的，所以要做判断，是IE8的时候要使用window.event
	e = e?e:window.event;
	console.log("x="+e.clientX+",y="+e.clientY);
}

一个事件处理函数处理多个事件的封装方式

eleObj.onclick = eleEvents();
eleObj.onmouseover = eleEvents();
eleObj.onmouseout = eleEvents();
function eleEvents(e) {
	switch(e.type){
		case "click":
			//点击事件处理逻辑
			break;
		case "mouseover":
			//鼠标悬停事件处理逻辑
			break;
		case "mouseout":
			//鼠标离开事件处理逻辑
			break;
	}
}