JavaScript進階系列07,滑鼠事件

滑鼠事件有Keydown, Keyup, Keypress，但Keypress與Keydown和Keyup不同，如果按ctrl, shift, caps lock......等修飾鍵，不會觸發Keypress事件，而會觸發Keydown和Keyup事件，這就是Keypress事件與Keydown、Keyup事件的不同之處。另外，通常使用Keypress事件來獲取使用者輸入資訊。

 

繼續使用"JavaScript進階系列05,事件的執行時機, 使用addEventListener為元素同時註冊多個事件,事件引數"中的跨瀏覽器事件處理機制來觸發滑鼠事件。

 

建立Script2.js只允許輸入大小寫字母，給Keypress事件註冊方法。

(function() {
    var txtbox = document.getElementById("txtInput");
    eventUtility.addEvent(txtbox, "keypress", function(evt) {
        var code = eventUtility.getCharCode(evt);
        //如果是大寫或小寫字母
        if ((code >= 65 && code <= 90) || (code >= 97 && code <= 122)) {
            
        } else {
            eventUtility.preventDefault(evt);
        }
    });
}());

 

頁面部分：

    <input type="text" id="txtInput"/>
    <script src="eventUtility.js"></script>
    <script src="script2.js"></script>

輸出結果：在鍵盤輸入非大小寫字母，input沒任何反應   

 

非修飾鍵對應的ASCII碼：
A-Z：65-90
a-z: 97-122
0-9: 48-57

 

其實，使用Keydown或Keyup事件，也能達到相同的效果。修改Script2.js如下：

(function() {
    var txtbox = document.getElementById("txtInput");
    eventUtility.addEvent(txtbox, "keydown", function(evt) {
        var code = evt.keyCode;
        //如果是大寫或小寫字母
        if ((code >= 65 && code <= 90) || (code >= 97 && code <= 122)) {
            
        } else {
            eventUtility.preventDefault(evt);
        }
    });
}());

與keypress事件不同，keyup和keydown事件通過KeyCode屬性獲取鍵盤按下的非修飾鍵。另外, 通過evt.altkey, evt.ctrlKey, evt.shiftKey獲取按下的alt鍵， ctrl鍵和shift鍵。

 

修改Scrip2.js來判斷是否按下了"ctrl+B"組合鍵。

(function() {
    eventUtility.addEvent(document, "keydown", function(evt) {
        var code = evt.keyCode;
        var ctrlkey = evt.ctrlKey;
        if (ctrlkey && code === 66) {
            alert('按下了ctrl+B組合鍵');
        }
    });
}());

 

“JavaScript進階系列”包括：

JavaScript進階系列01,函式的宣告，函式引數，函式閉包

JavaScript進階系列02,函式作為引數以及在陣列中的應用

JavaScript進階系列03,通過硬編碼、工廠模式、建構函式建立JavaScript物件

JavaScript進階系列04,函式引數個數不確定情況下的解決方案

JavaScript進階系列05,事件的執行時機, 使用addEventListener為元素同時註冊多個事件,事件引數

JavaScript進階系列06,事件委託

JavaScript進階系列07,滑鼠事件