zoukankan      html  css  js  c++  java
  • javascript事件处理程序


    javascript 事件处理程序

    1、普通事件处理程序

         
    <input  type="button" value="click me" onclick="showMessage()"  /> 

    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.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;
    			}
    		}
    	}



  • 相关阅读:
    引用传递函数值
    关于引用(python中的伪指针)的理解
    学生管理系统_排序后通过name删除列表里的字典
    学生管理系统(函数版)
    全局变量和局部变量的理解
    lambda隐藏函数的嵌套
    lambda函数常见用法
    函数的多个返回值
    函数的函数名重名
    函数的嵌套
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/6882930.html
Copyright © 2011-2022 走看看