JavaScript进阶系列07,鼠标事件

标签：style   blog   http   color   io   os   使用   ar   java   

鼠标事件有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);
        }
    });
}());

修改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,鼠标事件

JavaScript进阶系列07,鼠标事件

标签：style   blog   http   color   io   os   使用   ar   java   

原文地址：http://www.cnblogs.com/darrenji/p/4006710.html