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(节点，方法，事件名);防止内存泄漏。