javascript事件处理程序

落日映苍穹つ 2022-08-01 13:59 246阅读 0赞

## javascript 事件处理程序 ##

### 1、普通事件处理程序 ###

function showMessage(){
    
    	alert("clicked");
    
    }

### 2、DOMO 级事件处理程序 ###

<span style="white-space:pre">	</span>//老方法
    	 var btn=document.getElementById("myBtn");	
    	 //dom扩展方法 支持主流浏览器，类似jquery语法
         var btn=document.querySelector("#myBtn");
         btn.οnclick=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;
    			}
    		}
    	}

###     ###