我們都知道，dom事件處理程式有兩種類型：DOM0級和DOM2級，其中DOM0級在文檔中調用onclick事件，這種方法比較繁瑣，DOM2級使用addEventListener()和removeEventListener()兩個方法處理事件，這種方法比較常見，但是，ie人家牛逼，IE中也有類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接受相同的連個參數：事件處理程式，處理函數。 廢話不多說，直接上代碼：
一：attachEvent()用法。
attachEvent()添加事件處理程式都會被添加到冒泡階段：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="divIe">你可以改變世界！</div>
</body>
<script type="text/javascript">
var divIe = document.getElementById('div3Ie');
divIe.attachEvent('onclick',function(){
console.log('bangbang');
});
</script>
</html>
二：attachEvent()和DOM0級和DOM2級方法的差別在哪？
- attachEvent()裡面的第一個參數是onclick而不是和addEventListener()中的click一樣；
- attachEvent()使用和使用DOM0級的差別主要在于事件處理程式的作用域。在使用DOM0級方法情況下，事件處理程式會在其所屬的作用域内運作；在使用attachEvent()方法的情況下，事件處理程式會在全局作用域中運作，是以這裡面的this相當于window。不過上面的程式我用Opera和chrome都不能測試成功，必須是ie浏覽器才可以使用。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="btn">你可以改變世界！</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
console.log(window.attachEvent);
console.log(window.detachEvent);
console.log(window.addEventListener);
btn.attachEvent('onclick',function(){
console.log('bangbang');
console.log(this); //window
});
</script>
</html>
-
另外，還有一點不同的是，使用attachEvent()綁定多個事件的時候，和addEventListener()以相反的順序觸發：例如：
在上面的程式中加入：
btn.attachEvent('onclick',function(){
console.log('yanniu');
});
然後執行程式後，先輸出’yanniu’，然後再輸出’bangbang’;
4. 和removeEventListener的作用一樣，deachEvent()也可以移除attachEvent()添加的事件：
function handler(){
alert('删除');
}
btn.attachEvent('onclick',handler);
btn.detachEvent('onclick',handler);
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)