JS事件模型小結

三種事件模型：原始事件模型（DOM0），DOM2事件模型，IE事件模型；

不同點：

　　事件程序的注冊（給HTML元素所對應的JS對象綁定事件）

　　事件傳播的過程

事件模型的注冊：

　　一、原始事件模型（沒有兼容性問題）

原始事件模型的特點：

事件類型上面有ON（onclick）

沒有事件的傳播(事件一旦發生就立刻調用事件句柄)

一個DOM對象只能注冊一個類型的事件，如果注冊了兩個，則會發生覆蓋，只執行后一個事件；

 

注冊：

　1、將JS代碼作為HTML的性質（也就是直接在標簽中將HTML元素的性質設置為一段代碼）

<input type="button" value="Press me" onclick="alert('thanks');"  

　2、將事件處理程序作為js對象的屬性

<form name="f1">  
<input name="b1" type="button" value="Press Me"/>  
</form>  

document.f1.b1.onclick=function()  
    {  
       alert('thanks');  
     };  

或者

function plead()  
{  
   window.status="Please Press Me!";  
}  
document.f1.bi.onmouseover=plead; 
（注意沒有括號）

或者

  顯示調用：document.myfrom.onsubmit();  

解除：

將null復制給事件函數：

document.getElementById('click'_).onclick = null;

瀏覽器可以對每個事件執行默認的動作：

–submit按鈕默認行為是提交表單。

–超鏈接的默認行為是向指定資源發起請求。

-reset按鈕默認行為是重置。。

-click單選按鈕或復選框點擊設置。

-keydown用戶按下按鈕。

-mousedown鼠標按下。

阻止默認動作：

事件處理程序可以通過返回false來阻止瀏覽器的默認行為

特例：對超鏈接mouseover的window.status顯示事件的阻擋，是返回true

<a href="help.htm" onmouseover="window.status='help';return true;">help</a>  

 

二：DOM2級（IE8以下不支持）

主要特點：有一個事件的傳播過程

事件捕獲：事件由document對象一直向下捕捉到目標元素

事件執行：目標對象的事件處理程序執行

事件冒泡：事件從目標元素上升到document

 所有事件類型都會經歷第一階段，有的事件不會經歷第三階段（submit）

特點二：

一個dom對象可以注冊多個相同類型的事件，不會發生事件的覆蓋，會依次的執行各個事件函數。

eg：定義兩個盒子，outer包含inner,給inner可綁定兩個click事件，添加false表明在冒泡階段調用函數，則先執行inner的click函數，再執行outer的click函數。

因為點擊了里面的div后事件會經歷三個階段（document——outer——inner——document）

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
    <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
    var click = document.getElementById('inner');
    click.addEventListener('click',function(){
        alert('click one');
    },false);
    click.addEventListener('click',function(){
        alert('click two');
    },false);
</script>

 

注冊：

[object].addEventListener('事件名稱'，方法名（函數），事件模型（true/false）)

解除：

[object].removeEventListener('事件名稱'，方法名（函數），事件模型（true/false）)

 true/false決定在那個階段調用函數

true:捕獲

false:冒泡

停止傳播：event.stopPropagation()

如果我們給outer和inner都注冊了click事件但是我不希望outer執行怎么辦呢？

<script>
    var click = document.getElementById('inner');
    var clickouter = document.getElementById('outer');
    click.addEventListener('click',function(event){
        alert('inner show');
        event.stopPropagation();
    },false);
    clickouter.addEventListener('click',function(){
        alert('outer show');
    },false);
</script>

 

阻止默認動作：event.preventDefault()

 

由於事件捕獲階段沒有可以阻止事件的函數，所以一般都是設置為事件冒泡。

 

三、IE模型

特點：Event對象不是事件處理程序的函數參數，而是window的全局變量

事件對象event：事件發生時產生的對象。封裝了跟事件相關的信息。

–鼠標信息

–鍵盤信息

　　 IE得到的事件對象

div1.onclick = function(){

  var e = window.event;

}

　　DOM得到事件對象

div1.onclick = function(ev){

  var e = ev;

}

事件傳播過程只有冒泡階段

 

注冊：

[object].attachEvent("onclick",click1)

解除：

[object].detachEvent("onclick",click1)

停止傳播：window.ecent.cancelBubble=true;

 

 

event屬性和方法

Dom和IE的event相同點。

–獲取事件類型：e.type

–獲取鍵盤碼：keydown/keyup

–檢測是否按下e.shiftKey,e.altKey,e.ctrlKey

–獲取客戶坐標:e.clientX,e.clientY

–獲取屏幕坐標：e.screenX,e.screenY

Dom和IE的event不相同點。

                                                                                                                     IE                                                            DOM

獲取事件源	e.srcElement	e.target
獲取字符碼	e.keyCode	e.charCode
阻止默認行為	e.returnValue=false	e.preventDefault()
中止冒泡傳播	e.cancelBubble=true	e.stopPropagation()

 

 

獲取事件源對象：

div1.onclick = function(e){

   var ev = window.event||e;//獲取事件對象

var srcObj = ev.srcElement||ev.target;

}

 

事件類型：

 

鼠標事件

常見事件

–click  點擊

–dbclick  雙擊

–mousedown  鼠標按下時

–mouseout  當光標在一個元素上，並且用戶將其移出元素邊界時

–mouseover 鼠標移入時

–mouseup 釋放鼠標按鈕時

–mousemove  當光標在你一個元素上時 重復發生

頁面上所有元素均支持鼠標事件。

 

鍵盤事件

常見事件

–keydown  當用戶在鍵盤上按下一個鍵時發生，如果用戶按鍵不放，就會重復發生

–keypress  當用戶在鍵盤上按下一個字符鍵（不包括shift和Alt鍵等）時發生，如果用戶按鍵不放，也會重復發生

–keyup   當用戶釋放一個鍵時發生

通常在輸入框上實現鍵盤事件。

返回false表示不響應該事件

事件發生順序

–字符鍵：keydown,keypress,keyup

–非字符鍵：keydown,keyup

 

HTML事件

常見事件

–load,unload

–select

–change  失去焦點並且值被改變

–submit

–reset 

–resize 窗口或框架尺寸調整

–scroll 有滾動條時

–focus  獲得焦點

–blur  失去焦點

 

 

兼容性問題：

div1.onclick = function(ev){

  var e = windo.event||ev;

}

 

function myaddEvent(obj,event,fn){//對象 ,事件,函數,
    if(document.all){
        obj.attachEvent('on'+event,fn);
    }else{
        obj.addEventListener(event,fn);//第三個參數默認為false（冒泡）
    }
}