脚本宝典收集整理的这篇文章主要介绍了常用鼠标 、键盘事件及事件对象,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
常用鼠标事件:
鼠标事件 | 触发条件 |
onclilk | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获取鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedowm | 鼠标按下触发 |
鼠标事件对象:
鼠标事件对象 | 说明 |
e.clientX | 返回鼠标相当于浏览器窗口可视区的x坐标 |
e.clientY | 返回鼠标相当于浏览器窗口可视区的y坐标 |
e.pageX | 返回鼠标相当于文档页面的x坐标 IE9 +支持 |
e.pageY | 返回鼠标相当于文档页面的y坐标 IE9 +支持 |
e.screenX | 返回鼠标相当于电脑屏幕的x坐标 |
e.screenY | 返回鼠标相当于电脑屏幕的y坐标 |
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
常用键盘事件:
键盘事件 | 触发条件 |
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时触发 但不识别功能键,比如ctrl shift 等 |
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
键盘事件对象
键盘事件对象属性 | 说明 |
keyCode | 返回该键的ASCII值 |
使用keyCode属性判断用户按下哪个键
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
以上是脚本宝典为你收集整理的常用鼠标 、键盘事件及事件对象全部内容,希望文章能够帮你解决常用鼠标 、键盘事件及事件对象所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。