1.addEventListener 和 removeEventListener
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值
缺点：不兼容IE
<body>
<input type="button" value="按钮3" id="btn3">
</body>
<script type="text/javascript">
function showMes(event){
alert(event.type);
}
var btn3 = document.getElementById('btn3');
btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',function(){
alert(this.value);
},false);
btn3.removeEventListener('click',showMes,false);
</script>
2.attachEvent和detachEvent
接收两个参数：事件处理程序的名称和事件处理程序的函数
btn3.attachEvent('onclick',showMes);
然而，我们不能光为了chrome等浏览器只用addEventListener,或者光为了IE只用attachEvent，故而要将其融合起来用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value="按钮3" id="btn3"> </body> <script type="text/javascript"> function showMes(event){ alert(event.type); } var btn3 = document.getElementById('btn3'); var eventUtil = { 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; } }, 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; } } } eventUtil.addHandler(btn3,'click',showMes); </script> </html>