javascript事件处理程序

页面导航:首页 > 网络编程 > JavaScript > javascript事件处理程序

javascript事件处理程序

来源: 作者: 时间:2016-01-23 10:23 【

javascript 事件处理程序1、普通事件处理程序 function showMessage(){alert( "clicked ");}2、DOMO 级事件处理程序 老方法 var btn=document getElementById( "myBtn "); d

 

javascript 事件处理程序

1、普通事件处理程序

 

function showMessage(){

	alert("clicked");

}

2、DOMO 级事件处理程序

 	//老方法
	 var btn=document.getElementById("myBtn");	
	 //dom扩展方法 支持主流,类似jquery语法
     var btn=document.querySelector("#myBtn");
     btn.onclick=function(){
     	alert("clicked!");
     };

3、DOM2 级事件处理程序

主要介绍这个,上面两个大家应该都很熟悉了。DOM2事件处理程序定义了两个方法,用于添加和删除事件处理程序操作:addEventListener() 和 removeEventListener() 所有DOM节点都包含这两个方法,他们有3个参数 :要处理的事件名、函数 、布尔值(true捕获阶段执行,false冒泡阶段执行),一般填false 例子:
 var btn=document.getElementById("myBtn");	
	 btn.addEventListener("click",function(){
	 	alert("clicked!");
	 },false);

 //传入removeEventListener 的参数必须和addEventListener 一样
	 btn.removeEventListener("click",function(){
	 	//这里不会执行 没有用--
	 	alert("clicked!");
	 },false);

IE实现了两个类似的方法:attachEvent()和detachEvent() ,接受两个参数。没有八个bool值 例子 :
 	 var btn=document.getElementById("myBtn");	
     btn.attachEvent("onclick",function(){
     	alert("clicked");
     });

     btn.detachEvent("onclick",function(){
     	alert("clicked");
     });

所以 我们这边也写了个跨浏览器的事件处理程序:
//跨浏览器 事件处理程序
	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){
				//除IE 其他
				element.removeEventListener(type,handler,false);
			}else if(element.detachEvent){
				//IE
				element.detachEvent("on"+type,handler);
			}else{
				element["on"+type]=handler;
			}
		}
	}


 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<