JavaScript事件类型：键盘事件与焦点事件-原创手记-慕课网

键盘事件

用户在使用键盘时会触发键盘事件。

1、keydown事件和keyup事件

keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件。
Keyup：当用户释放键盘上的键时触发。

event对象属性

在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上的一个特定的键对应。
Dom和IE的event对象都支持keyCode属性。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.addEventListener('keyup',function(event){
    alert(event.keyCode)
})

２、keyPress事件

keyPress：当用户按下键盘上的字符键和Esc键时触发，如果按住不放的话，会重复触发此事件。按下其他键能否触发此事件因浏览器而异。

event对象属性

IE9+、Firefox、Safari和Chrome的event对象都支持charCode属性，这个属性只有在发生keyPress事件时才有值，这个值是按下的那个键所代表字符的ASCII编码。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.addEventListener('keypress',function(event){
    var code=event.charCode;
    alert(String.fromCharCode(code))
})

＊String.fromCharCode()方法将字符编码转换成实际的字符。

以跨浏览器的方式取得字符编码

代码如下：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

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;
        }
    },
    getEvent: function(event) {
        return event ? event: window.event;
    },
    getCharCode: function(event) {
        if (event.charCode) {
            return event.charCode
        } else {
            return event.keyCode
        }
    }
}

//调用 getCharCode()方法
var textbox = document.forms[0].elements['textbox'] 
EventUtil.addHandler(textbox, 'keyup',
function(event) {
    event = EventUtil.getEvent(event);
    alert(EventUtil.getCharCode(event));
})

焦点事件

focusin：在元素获得焦点时触发，和focus事件等价，但它冒泡。
focusout：在元素失去焦点时触发，和blur事件等价。
支持的浏览器有IE5.5+、Safari5.1+、Opera11.5和Chrome。

HTML5的焦点事件管理功能

元素获得焦点事件的方式有页面加载、用户输入（按Tab键）和调用focus()方法。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。
document.hasFocus()：这个方法用于确定文档是否获得焦点，返回布尔值。
document.activeElement：这个属性始终引用Dom中当前获得焦点的元素。默认情况下。文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。
支持这两个属性的浏览器包括：IE4+、Firefox3+、Safari3+、Opera8+和Chrome。

例子：

<form>
    <input type='text' name='textbox' value='hello'>
</form>

var textbox=document.forms[0].elements['textbox']
textbox.focus()
if(document.hasFocus()){
    alert(document.activeElement.tagName.toLowerCase())
}
//输出：input

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

JavaScript事件类型：键盘事件与焦点事件原创