JavaScript 事件类型（键盘事件，鼠标事件，焦点事件）

};

document.onkeypress = function(event) {

// 键盘按住时触发

console.log(‘key press’);

};

document.onkeyup = function (event) {

// 键盘弹起时触发

console.log(‘key up’);

};

event参数

该参数为 KeyboardEvent 事件对象，其中包含按键相关的一些属性。

• type：事件类型

• key：表示按下的键盘内容是什么即键值，按下字母 ‘p’ 时，值为’p’

• code：表示键盘代码，按下字母 ‘p’ 时，值为 ‘KeyP’

• keyCode：整数，表示键码，每个键都有唯一的键码，字母 ‘p’ 的键码为80

• altKey：布尔值，表示此时的 alt 键是否也按下

• ctrKey：布尔值，表示此时的 ctr 键是否也按下

• shiftKey：布尔值，表示此时的 shift 键是否也按下

• metaKey：布尔值，windows 平台表示 Window 键是否同时按下，mac表示Command键是否同时按下

• repeat: 布尔值，如果一个键一直被按着，则其值为true，表示重复

可以通过检查这些属性来判断用户按下的是什么键，以及是否 ctrl 和 alt 等键是否同时按下:

document.onkeydown = function(event) {

// 键盘按下是触发

console.log('key down: ’ + event.key);

if (event.altKey) {

console.log(‘alt is active’);

}

if (event.shiftKey) {

console.log(‘shift is active’);

}

};

鼠标事件

| 事件 | 发生时机 |

| — | — |

| onclick | 鼠标单击对象时触发的事件 |

| ondblclick | 鼠标双击对象时触发的事件 |

| onmousedown | 鼠标按钮被按下时触发的事件 |

| onmousemove | 鼠标被移动时触发的事件 |

| onmouseout | 鼠标离开监听该事件的元素或子元素时触发的事件 |

| onmouseover | 鼠标移动到监听该事件的元素或子元素时触发的事件 |

| onmouseup | 鼠标按键被松开时触发的事件 |

示例：

触发时的参数为 MouseEvent 对象类型，MouseEvent对象中包含下面比较有用的属性：

• type: 事件类型，如 mosemove 或者mousedown

• button：整型，触发鼠标事件时按下的按钮编号

• buttons：整型，触发鼠标事件时弹起来的按钮编号

• clientX：鼠标指针在 DOM 内容区的X坐标

• clientY：鼠标指针在 DOM 内容区的Y坐标

• offsetX：鼠标指针相对父节点填充边缘的X坐标

• offsetY: 鼠标指针相对父节点填充边缘的Y坐标

• screenX: 鼠标指针在全局屏幕的X坐标

• screenY: 鼠标指针在全局屏幕的Y坐标

• pageX: 鼠标指针在整个DOM内容（包括分页）的X坐标

• pageY: 鼠标指针在整个DOM内容（包括分页）的Y坐标

• altKey: 布尔值，表示此时的alt键是否也按下

• ctrKey: 布尔值，表示此时的alt键是否也按下

• shiftKey: 布尔值，表示此时的shift键是否也按下

• metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下

示例:点击鼠标右键，弹出div

document.oncontextmenu = function(){

return false

}; //禁止鼠标右键菜单显示

var res = document.getElementById(‘box’); //找到id为box的div

document.body.onmouseup = function(e){ //在body里点击触发事件

if(e.button===2){ //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）

console.log(e); //将传进去的参数打印出来

console.log(e.offsetY); //打印出鼠标点击的Y轴坐标

console.log(e.offsetX); //打印出鼠标点击的X轴坐标

res.style.top = e.offsetY+‘px’; //鼠标点击时给div定位Y轴

res.style.left = e.offsetX+‘px’; //鼠标点击时给div定位X轴

res.style.display = ‘block’; //显示div盒子

}else{

res.style.display = ‘none’; //否则不显示div盒子

}

}

焦点事件

不是所有元素都有焦点事件，只有可交互性的元素才有，比如表单元素，a标签。页面中只能有一个元素有焦点，一个聚焦，另一个就失焦，默认在document。

form.txt1.focus(); // 让元素获得焦点，该方法不会触发onfocus（）事件。