JavaScript DOM進階程式設計 4.2 事件類型–我要堅持到底！

對象事件

• load和unload（載入頁面的時候調用load，關閉頁面的時候調用unload）
• abort和error

對於載入映像時出現錯誤的情況，可以使用error事件接聽程式來進行說明：

ADS.addEvent(window,'load',function(){    //建立一個映像元素    var image=document.createElement('IMG');    //當映像載入後將其添加到文檔主體    ADS.addEvent(image,'load',function(){        document.body.appendChild(image);    });    //如果載入時出錯，則添加相應資訊    ADS.addEvent(image,'error',function(){        var message=document.createTextNode('The image failed to load');        document.body.appendChild(message);    });    //設定映像的src屬性以便瀏覽器取得映像    //可以在這邊隨便添加任何圖片的url    image.setAttribute('src','http://advanceddomscripting.com/images/working.jpg');    //除了下面的這幅映像不存在而且會發生載入錯誤外，與上面都相同    var imageMissing=document.createElement('img');    ADS.addEvent(imageMissing,'load',function(){        document.body.appendChild(imageMissing);    });    ADS.addEvent(imageMissing,'error',function(){        var message=document.createTextNode('imageMissing failed to load');        document.body.appendChild(message);    });    //可以在這邊隨便添加任何圖片的url    imageMissing.setAttribute('src','http://advanceddomscripting.com/images/missing.jpg');});

• resize事件（視窗大小調整時該事件被調用）
•  scroll事件（適用於具有overflow:auto樣式的元素，當元素滾動期間被連續調用。）

滑鼠移動事件

• 滑鼠移動時候連續調用mousemove
• 移動到新對象mouseover
• 移出新對象mouseout

 

ADS.addEvent(window,'load',function(W3CEvent){    //一個用於將事件類型和對象    //記錄到日誌視窗中的方法    function logit(W3CEvent)    {        switch(this.nodetype)        {            case ADS.node.DOCUMENT_NODE:                ADS.log.write(W3CEvent.typp+' on document');            break;            case ADS.node.ELEMENT_NODE:                ADS.log.write(W3CEvent.type+' on box');            break;        }    }    ADS.addEvent(document,'mousemove',logit);    ADS.addEvent(document,'mouseover',logit);    ADS.addEvent(document,'mouseout',logit);    var box=document.getElementById('box')    ADS.addEvent(box,'mousemove',logit);    ADS.addEvent(box,'mouseover',logit);    ADS.addEvent(box,'mouseout',logit);});

按一下滑鼠事件

• 當按下時，mousedown
• 抬起時mouseup
• 只有滑鼠不動的時候才會發生click
• 雙擊dblclick

ADS.addEvent(window,'load',function(W3CEvent){    //一個用於將事件類型和對象    //記錄到日誌視窗中的方法    function logit(W3CEvent)    {        switch(this.nodetype)        {            case ADS.node.DOCUMENT_NODE:                ADS.log.write(W3CEvent.typp+' on document');            break;            case ADS.node.ELEMENT_NODE:                ADS.log.write(W3CEvent.type+' on box');            break;        }    }    ADS.addEvent(document,'mousedown',logit);    ADS.addEvent(document,'mouseup',logit);    ADS.addEvent(document,'dblclick',logit);    var box=document.getElementById('box')    ADS.addEvent(box,'mousedown',logit);    ADS.addEvent(box,'mouseup',logit);    ADS.addEvent(box,'click',logit);    ADS.addEvent(box,'dblclick',logit);});

鍵盤事件

• keydown某個鍵盤被按下時調用。
• keyup事件相應的鍵被釋放時調用。
• keypress事件緊隨keyup事件之後。

表單相關事件

• submit和reset事件

這裡有個js代碼，驗證加拿大郵遞區號的，很簡單，所以僅僅看看代碼。

function isPostalCode(s){    return s.toUpperCase().match(/[A-Z][0-9]\s*[0-9][A-Z][0-9]/i);}ADS.addEvent(window,'load',function(){    ADS.addEvent(        document.getElementById('canadianAddress'),        'submit',        function(W3CEvent){            var postalCode=document.getElementById('postalCode').value;            //使用Regex來檢查格式是否有效            if (!isPostalCode(posalCode))            {                alert('That\'s not a valid Canadian postal code!');                //提交表單                ADS.preventDefault(W3CEvent);            }        }    );});

•  blur和focus事件

 focus事件會在使用者單機一個元素或者通過按Tab鍵遣換到一個元素時候被調用，而單機元素之外其他地方護著Tab鍵離開元素，則會在原先調用focus事件元素上調用blur事件

下面是為了郵遞區號欄位添加blur和focus接聽程式的載入事件接聽程式

ADS.addEvent(window,'load',function(){    //添加初始樣式    var postalCode=document.getElementById('postalCode');    postalCode.className='inputMissing';    //當擷取焦點屎將類修改為編輯    ADS.addEvent(postalCode,'focus',function(W3CEvent){        //通過修改類來表示使用者正在編輯這個欄位        this.className='inputEditing';    });    //當失去焦點時候對資訊進行驗證，並根據輸入的值是否有效重新修改樣式    ADS.addEvent(postalCode,'blur',function(W3CEvent))    {        if (this.value=='')        {            //修改類以表示缺少內容            this.className='inputMissing';        }else if (!isPostalCode(this.value))        {            //修改類以表示內容無效            this.className='inputInvalid';        }else        {            //修改樣式以表示內容完成            this.className='inputComplete';        }    }});

•  change事件

適用於<input>,<select>,<textarea>表單元素，該事件會在focus事件發生後，當使用者在focus和blur之間進行修改元素的值時被調用。

//驗證表單的同時，還能自動產生表單其他欄位的內容ADS.addEvent(window,'load',function(){    var postalCode=ADS.$('postalCode');    ADS.addEvent(postalCode,'change',function(W3CEvent){        var newPostalCode=this.value        if (!isPostalCode(newPostalCode))        {            return;        }        var reg=new XMLhttpRequest();        req.open('POST','server.js?postalCode='+newPostalCode,true);        req.onreadystatechange=function(){            if (req.readyState==4)            {                eval(req.responsetText);                if (ADS.$('street').value=='')                {                    ADS.$('street').value=street;                }                if (ADS.$('city').value=='')                {                    ADS.$('city').value=city;                }                if (ADS.$('province').value=='')                {                    ADS.$('province').value=province;                }            }            }        req.send();    });});