1. 程式人生 > >跨IE和Chrome瀏覽器事件處理的解決辦法

跨IE和Chrome瀏覽器事件處理的解決辦法

一、事件流 事件流描述的是從頁面中接受事件的順序。 IE的事件流是事件冒泡流,而Netscape的事件流是事件捕獲流 1、事件冒泡 事件冒泡,即事件最開始由最具體的元素(文件中巢狀層次最深的那個節點)接收,然後逐級向上轉播至最不具體的節點(文件)。 2、事件捕獲 事件捕獲的思想是不太具體的節點應該更早接收到事件,而最具體的節點最後接收到事件。 二、事件處理程式 1、HTML事件處理程式 2、DOM0級事件處理程式 3、DOM2級事件處理程式 DOM2級事件定義了兩個方法:用於處理指定和刪除事件處理程式的操作:addEventListener()和removeEventListener()。它們都接收三個引數:要處理的事件名、作為事件處理程式的函式和一個布林值。
4、IE事件處理程式 attachEvent()新增事件 detachEvent()刪除事件 這兩個方法接收相同的兩個引數:事件處理程式名稱與事件處理函式 5、跨瀏覽器的事件處理程式 三、事件物件 事件物件event 1、DOM中的事件物件 (1)、type:獲取事件型別 (2)、target:事件目標 (3)、stopPropagation() 阻止事件冒泡 (4)、preventDefault() 阻止事件的預設行為 2、IE中的事件物件 (1)、type:獲取事件型別 (2)、srcElement:事件目標 (3)、cancelBubble=true阻止事件冒泡 (4)、returnValue=false阻止事件的預設行為 
<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>
HTML:
<body>
<input type="button" value="按鈕" id="btn">
</body>