JS中的DOM事件

1.HTML事件处理程序

HTML
<div id="box">
<input type="button" name="" id="btn" value="按钮" onclick="showMessage()"/>
</div>

JS
<script type="text/javascript">
	function showMessage(){
		alert("Hellow World");
		}
</script>

HTML事件缺点：

HTML和JS代码紧密的耦合在一起，JS代码个HTML都需要进行修改。

2.DOM0级事件处理程序

(较传统的方式：把一个函数赋值给一个事件的处理程序属性用的比较多的方法，简单，跨浏览器的优势)

HTML
<input type="button" value="按钮2" id="btn2"/>

JS
<script type="text/javascript">
   var btn2=document.getElementById("btn2");
   btn2.onclick=function(){
        alert("这是通过DOM0级添加的事件！");
   }
   //btn2.onclick=null;删除OnClick属性,事件注销
</script>

没有HTML事件处理程序的缺点。

3.DOM2级事件处理程序

(DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作；addEventListener()和removeEventListner()；接受三个参数：要处理的事件名、作为事件处理程序的函数和布尔值)

HTML
<input type="button" value="按钮3" id="btn3"/>

JS
 var btn3=document.getElementById("btn3");
//           方法1
            btn3.addEventListener("click",showMessage,false);
//           方法2
            btn3.addEventListener("click",function(){
              alert("DOM2事件处理程序");
            },false);
//          btn3.removeEventListener("click",showMessage,false);删除OnClick属性,事件注销

DOM2事件缺点：

IE8及以下浏览器不兼容该方法。

4.IE事件处理程序

attachEvent()添加事件，detachEvent()删除事件

(接收相同的两个参数：事件处理程序的名称和事件处理程序的函数)

不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡！

HTML
<input type="button" value="按钮4" id="btn4"/>

JS
  var btn4=document.getElementById("btn4");
            //方法1
            btn4.attachEvent("onclick",showMessage);
            //方法2
            btn4.attachEvent("onclick",function(){
               alert("IE事件处理程序");
            });
            //btn4.detachEvent("onclick",showMessage);删除OnClick属性,事件注销

IE事件缺点：

除IE外其他浏览器不支持。

5.跨浏览器的事件处理程序

HTML
<input type="button" value="按钮5" id="btn5"/>

var btn5=document.getElementById("btn5");
            //跨浏览器事件处理程序
            var event={
            	//添加句柄
            	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;
//          			element.onclick===element["onclick"]
            		}
            	},
            	//删除句柄
            	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;
//         			element.onclick===element["onclick"]
            		}
            	}
            }
            event.addHandler(btn5,"click",showMessage);
            //event.removeHandler(btn5,"click",showMessage);删除OnClick属性,事件注销

现在兼容性处理之后，兼容更多浏览器的按钮事件了。但是调用这个方法之前，要把前面其他类型的按钮事件注释掉，否则这个方法调用默认无效。所以有了这个兼容性处理方法之后，我们想用的时候，直接调用event.addHandler(节点，方法，事件名);就好了，不用的时候记得event.removeHandler(节点，方法，事件名);防止内存泄漏。