<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮1" onclick="message()"> <!使用html事件处理程序,改动时需要改动俩处!> <input type="button" value="按钮2" id="bn1"> <!使用DOM0级事件处理程序,此时只需改动一处,且能添加多个事件处理程序!> <input type="button" value="按钮3" id="bn2"> <script> var bn1=document.getElementById("bn1"); var bn2=document.getElementById("bn2"); function message(){ alert("我只是个按钮哦"); } bn1.onclick = functiom(){ alert("ddd"); }; //DOM0级事件处理程序,取消可写bn1.onclick=null //bn2.addEventListener('click',message,flase); //DOM2级事件处理程序,当处理捕获事件流用true,冒泡事件流时用flase //取消:bn2.removeEventListener('click',message,flsae) //bn2.attachEvent('onclick',message); //这是ie浏览器中的DOM2级事件处理程序 //ie中默认支持冒泡事件流,所以不需要布尔值参数 //取消用:deltachEvent("onclick",message()); //跨浏览器事件处理程序 var EventHandle={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addeventListener(type,handler,flase); } else if(element.attachEvent){ element.attachEvent('on'+type,handler); } else{element['on'+type]=headler; } } , 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; } } } EventHandle.addHandler(bn2,'click',message); </script> </body> </html>
相关分类