HTML事件
<body> <input type="button" value="按钮1" id="but1" onclick="click()"> <script type="text/javascript"> function click(){ alert(this.value+"被点击了"); } </script> </body>
DOM0级事件
<body> <input type="button" value="按钮1" id="but1"> <script type="text/javascript"> function click(){ alert(this.value+"被点击了"); } var but1 = document.getElementById("but1"); but1.onclick = click;//添加 but1.onclick = null;//移除 </script> </body>
DOM2级事件
<body> <input type="button" value="按钮1" id="but1"> <script type="text/javascript"> function click(){ alert(this.value+"被点击了"); } var but1 = document.getElementById("but1"); but1.addEventListener("click", click, false);//添加,参数false表示事件冒泡流,true表示捕获流 but1.removeEventListener("click", click, false);//移除 </script> </body>
IE8-版本事件
<body> <input type="button" value="按钮1" id="but1"> <script type="text/javascript"> function click(){ alert(this.value+"被点击了"); } var but1 = document.getElementById("but1"); but1.attachEvent("onclick", click);//添加,没有参数false或true,是因为IE8以及更早的浏览器只支持事件冒泡流, but1.detachEvent("onclick", click);//移除 </script> </body>
兼容写法
<body> <input type="button" value="按钮1" id="but1"> <script type="text/javascript"> function myClick(){ alert(this.value+"被点击了"); } var but1 = document.getElementById("but1"); var eventUtil = {//封装事件处理程序 addEvent:function(ele,type,fun){ if(ele.addEventListener){ ele.addEventListener(type, fun, false); }else if(ele.attachEvent){ ele.attachEvent('on'+type, fun); }else{ ele['on'+type] = fun; } }, removeEvent:function(ele,type,fun){ if(ele.removeEventListener){ ele.addEventListener(type, fun, false); }else if(ele.detachEvent){ ele.detachEvent('on'+type, fun); }else{ ele['on'+type] = null; } } } eventUtil.addEvent(but1,'click',myClick); </script> </body>