我现在要给这个 id 为button 的元素添加click 事件，并且点击一次要连续执行三个函数
<div id="button">click me</div>
一般我们写一个js 事件都是这么写的：
<script type="text/javascript"> function clickButton(){ alert(‘点击我第一次‘); } function clickButtonT(){ alert(‘点击我第二次‘); } function clickButtonr(){ alert(‘点击我第三次‘); } document.getElementById(‘button‘).onlick = clickButton; document.getElementById(‘button‘).onlick = clickButtonT; document.getElementById(‘button‘).onlick = clickButtonr; </script>
但是这种写法你执行后会发现只弹出了“一个点击我三次”；
下面我们就使用下attachEvent的方法来进行编写：
document.getElementById(‘button‘).attachEvent(‘onclick‘,clickButton); document.getElementById(‘button‘).attachEvent(‘onclick‘,clickButtonT); document.getElementById(‘button‘).attachEvent(‘onclick‘,clickButtonr);
使用该方法后三个函数都执行了，执行顺序：clickButtonr、clickButtonT、clickButton
执行到这，你用IE之外的浏览器测试会发现报错，是因为这个attachEvent很不幸的并不支持其他的浏览器，他是IE特有的；但是并不是说就没有其他的方法来支持火狐以及其他的浏览器了，现在有一个 addEventListener 的方法是可以支持的，具体写法是这样的
document.getElementById(‘button‘).addEventListener(‘click‘,clickButton,false); document.getElementById(‘button‘).addEventListener(‘click‘,clickButtonT,false); document.getElementById(‘button‘).addEventListener(‘click‘,clickButtonr,false);
使用该方法后三个函数都执行了，执行顺序：clickButton 、clickButtonT、clickButtonr,最终想要实现可以同时兼容所有浏览器：那么就结合着attachEvent和addEventListener这两个方法来实现。实现方法如下：
<script type="text/javascript"> function ManageEvent(eventObj,event,eventHandler){ if(eventObj.addEventListener){ eventObj.addEventListener(event,eventHandler,false); }else if(eventObj.attachEvent){ event = "on"+ event; eventObj.attachEvent(event,eventHandler); }; }; function clickButton(){ alert(‘点击我第一次‘); } function clickButtonT(){ alert(‘点击我第二次‘); } function clickButtonr(){ alert(‘点击我第三次‘); } window.onload = function(){ ManageEvent(document.getElementById(‘button‘),‘click‘,clickButton); ManageEvent(document.getElementById(‘button‘),‘click‘,clickButtonT); ManageEvent(document.getElementById(‘button‘),‘click‘,clickButtonr); }
attachEvent 与 addEventListener 的用法、区别
原文：http://www.cnblogs.com/sandraMaying/p/attachEvent_addEventListener.html