javascript 事件

事件

 

javascript与html之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
 * 可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。

 

 

事件流

事件流描述的是从页面中接收事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。
 IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流

 * 事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较不具体的节点（文档）。
 * 事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

 

 

 

1：事件处理程序（或事件侦听器）

  1.1：DOM0级事件处理程序

 

/**
 *DOM0级事件处理程序
 * 这种为事件处理程序赋值的方法是第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。
 * 原因一是简单，二是具有跨浏览器的优势 。 
 */
 
/**
 *添加事件处理程序 
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(){
	alert("Clicked");
}
/**
 *Dom0级方法指定的事件处理 程序被认为是元素的方法，因此，这时候的事件处理程序是在元素的作用域中运行
 * 换句话说，程序中的this引用当前元素。
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(){
	alert(this.id);
}

/**
 *删除事件处理程序 
 */
btn.onclick=null;

 

 

 

1.2：DOM2级事件处理程序

 

/**
 * DOM2级事件处理程序
 * DOM2 级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener().
 * 所有的DOM节点都包含这两个方法，并且它们接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值 。
 * 最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序；如果是false,表示在冒泡阶段调用事件处理程序。
 *  
 */
/**
 *在按钮上为click事件添加事件处理程序 
 */
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
	alert(this.id);
},false);
/**
 *使用DOM2级方法添加事件处理程序的主要好处是可 以添加多个事件处理程序。 
 * 这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
 */
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
	alert(this.id);
},false);
btn.addEventListener("click",function(){
	alert("Hello world");
},false);


/**
 *删除事件 
 * 
 * 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。
 * 这也意味着通过addEventListener()添加的匿名函数将无法移除。
 * 
 * 因为第二参数与传入addEventListener()中的那一个是完全不同的函数。
 */
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
	alert(this.id);
},false);
//省略其他代码
btn.removeEventListener("click",function(){  //没有用！
	alert(this.id);
},false);


/**
 *解决办法是传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同。 
 * 
 */
var btn=document.getElementById("myBtn");
var handler=function(){
	alert(this.id);
}
btn.addEventListener("click",handler,false);

//省略其它代码

btn.removeEventListener("click",handler,false);//有效！


/**
 * * 大多数情况下，都是将事件处理程序添加到事件流冒泡阶段，这样可以最大限度地兼容各种浏览器。
 * 最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。
 * 如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。 
 */

 

 

 

1.3：IE事件处理程序

 

/**
 * IE事件处理程序
 * 
 * IE实现了与DOM中类似的两个方法：attachEvent()和deleteEvent().这两个方法接受相同的两个参数：
 * 事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
 **/
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
	alert("Clicked");
})
/**
 * 在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window.
 **/
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
	alert(this==window); //true
})
/**
 * 
 * 与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。不过，与DOM方法不同的是，
 * 这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。 
 **/
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
	alert("Clicked");
})
btn.attacEvent("onclick",function(){
	alert("Hello world!");
})
/**
 * 使用attachEvent()添加的事件可以通过deleteEvent()来移除，条件是必须提供相同的参数。
 * 这也意味着添加匿名函数将不能被移除。
 */
var btn=document.getElementById("myBtn");
var handler=function(){
	alert("Clicked");
}
btn.attachEvent("onclick",handler);

//省略其他代码

btn.detachEvent("onclick",handler);

 

 

 

1.4：跨浏览器的事件处理程序

 

/**
 *跨浏览器的事件处理程序
 * 
 * 为了以跨浏览器的方法处理事件，不少开发人员会使用能够隔离浏览器差异的javascript库，
 * 还有一些开发人员会自己开发最合适的事件处理方法。 
 */
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;
		}
	}
}

var btn=document.getElementById("myBtn");
var handler=function(){
	alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);

//省略其他代码

EventUtil.removeHandler(btn,"click",handler);

 

 

 

2：事件对象

 

 2.1：DOM2上事件对象

 

/**
 *事件对象 
 * 
 * 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。
 * 包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，
 * 而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式 不同。
 * 
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(event){
	alert(event.type); //"click"
}
btn.addEventListener("click",function(event){
	alert(event.type); //"click"
},false);

btn.onclick=function(event){
	alert(event.currentTarget===this);//true
	alert(event.target===this); //true
}

/**
 *单击这个例子中按钮时，this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素上的。
 * 然而，target元素却等于按钮元素，因为它是click事件真正的目标。 
 */
document.body.onclick=function(event){
	alert(event.currentTarget===document.body); //true
	alert(this===document.body);//true
	alert(event.target===document.getElementById("myBtn"));//true
}

/**
 *在需要通过一个函数处理多个事件时，可以使用type属性。
 *  
 */
var btn=document.getElementById("myBtn");
var handler=function(event){
	switch(event.type){
		case "click":
			alert("Clicked");
			break;
		
		case "mouseover":
			event.target.style.backgroundColor="red";
			break;
			
		case "mouseout":
			event.target.style.backgroundColor="";
			break;
	}
}

btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;


/**
 *要阻止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其href指定的URL.
 * 如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它。 
 * 只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
 */
var link=document.getElementById("myLink");
link.onclick=function(event){
	event.preventDefault();
}

/**
 * stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获 或冒泡。
 *  
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(event){
	alert("Clicked");
	event.stopPropagation();
}
document.body.onclick=function(event){
	alert("Body clicked");
}

 

 

 

2.2：IE中的事件对象

 

/**
 * IE中的事件对象 
 * 
 * 与访问DOM中的event对象不同，要访问IE的event对象有几种不同的方式 ，取决于指定事件处理程序的方法。
 * 添加事件处理程序时，event对象作为window对象的一个属性存在。
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(){
	var event=window.event;
	alert(event.type);//"click"
}

/**
 *因为事件处理程序的作用域是根据指定它的方式 来确定的，所以不能认为this会始终等于事件目标。
 * 故而，最好还是使用event.srcElement比较保险。 
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(){
	alert(window.event.srcElement===this);//true
}
btn.attachEvent("onclick",function(event){
	alert(event.srcElement===this);//false
})

/**
 *cancelBubble属性与DOM中的stopPropagation()方法作用相同，都是用来停止 事件冒泡的。
 * 由于IE不支持事件捕获，因而只能取消事件冒泡;但stopPropagation()可以同时取消事件捕获和冒泡 。 
 */
var btn=document.getElementById("myBtn");
btn.onclick=function(){
	alert("Clicked");
	window.event.cancelBubble=true;
}
document.body.onclick=function(){
	alert("Body clicked");
}

 

 

2.3：跨浏览器的事件对象

 

/**
 *跨浏览器的事件对象 
 * 虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。
 */
var EventUtil={
	addHandler:function(element,type,handler){
		//省略的代码
	},
	getEvent:function(event){
		return event?event:window.event;
	},
	getTarget:function(event){
		return event.target||event.srcElement;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue=false;
		}
	},
	removeHandler:function(element,type,handler){
		//省略的代码 
	},
	stopPropagation:function(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble=true;
		}
	}
}

 

 

 

 

事件类型

 

/**
 *事件类型
 * 
 * Web 浏览器中可能发生的事件有很多类型。不同的事件类型具有没的信息。而DOM2级事件“规定了下列5种事件：
 * 	1：UI（User Interface,用户界面 ）事件，在用户与页面上的元素交互时触发；
 *  2：鼠标事件，当用户通过鼠标在页面上执行操作时触发；
 *  3：键盘事件，当用户通过键盘在页面上执行操作时触发；
 *  4：HTML事件，当浏览器窗口发生变化 或发生特定的客户端 /服务器交互时触 发;
 *  5:变动 事件,当底层DOM结构发生变时触 发。 
 */