跨IE和Chrome瀏覽器事件處理的解決辦法
阿新 • • 發佈：2019-01-28
一、事件流
事件流描述的是從頁面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流
1、事件冒泡
事件冒泡，即事件最開始由最具體的元素(文件中巢狀層次最深的那個節點)接收，然後逐級向上轉播至最不具體的節點(文件)。
2、事件捕獲
事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。
二、事件處理程式
1、HTML事件處理程式
2、DOM0級事件處理程式
3、DOM2級事件處理程式
DOM2級事件定義了兩個方法：用於處理指定和刪除事件處理程式的操作：addEventListener()和removeEventListener()。它們都接收三個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。
HTML：<script type="text/javascript"> function showMsg(){ alert("Hello"); } 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; } } } window.onload=function(){ var btn=document.getElementById('btn'); eventUtil.addHandler(btn,'click',showMsg); }; </script>
<body>
<input type="button" value="按鈕" id="btn">
</body>