1.在html代码元素中添加事件为Html事件。
2.使用元素的onclick方法为DOM0级事件处理。
3.使用事件添加方法为元素添加事件(
chrome:addEventListener,removeEventListener
IE:attachEvent,detachEvent
)为DOM2级事件处理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div> <input type="button" value="按钮" id="btn1" onclick="showMess()"/><!--DDDD--> <input type="button" value="按钮2" id="btn2"/> <input type="button" value="按钮3" id="btn3"/> <script type="text/javascript"> function showMess() { alert("html事件"); } var btn2 =document.getElementById("btn2"); var btn3 =document.getElementById("btn3"); btn2.onclick=function(){ alert("Dom0级处理程序"); } btn2.onclick=null;/*btn2为Dom0级事件处理程序*/ /*var btn3 =document.getElementById("btn3"); btn3.addEventListener('click',showMess,false); btn3.addEventListener('click',function(){ alert("Dom2级处理程序"); },false); btn3.removeEventListener('click',showMess,false);*/ /*btn3为Dom2级事件处理程序*/ //如下为添加对象兼容IE,谷歌或只支持Dom0级处理的浏览器 var eventUnit={ addEventHandler:function(element,type,handler){ if(element.addEventListener) { element.addEventListener(type,handler,false); } else if(element.attachEvent) { element.attachEvent(type,handler); } else { element['on'+type]=handler; } } , removeEventHandler:function(element,type,handler){ if(element.removeEventListener) { element.removeEventListener(type,handler,false); } else if(element.detachEvent) { element.detachEvent(type,handler); } else { element['on'+type]=null; } } } eventUnit.addEventHandler(btn3,'click',showMess); </script> </div> </body> </html>