事件对象（鼠标键盘）
Posted cnlisiyiii-stu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件对象（鼠标键盘）相关的知识，希望对你有一定的参考价值。
事件对象
在事件触发后或在事件处理程序中，（函数体）所获取并操作的对象。
1. 获取事件对象
语法：事件源.事件类型 = function(e){}
形参 e（可以是任意字母）就是事件对象。执行函数（即事件触发后）的时候，浏览器会把事件对象交给形参e。
1 <script> 2 document.onclick = function() { 3 //浏览器会默认给事件对象一些属性 4 console.log(e); 5 //从对象中拿东西。X坐标和Y坐标 6 console.log(e.clientX,e.clientY); 7 } 8 </script>
2. 鼠标事件对象相关属性
1）鼠标事件类型：
- onclick
- onmouseenter
- onmouseleave
- onmousemove 鼠标移动事件
- onmousedown 鼠标按键按下事件
- onmouseup 鼠标按钮弹起事件
2）鼠标事件对象相关属性：（获取鼠标位置）
1 <body> 2 <div></div> 3 <script> 4 var div = document.querySelector(‘div‘); 5 div.onclick = function(e) { 6 console.log(‘相对于浏览器当前可视页面的位置：‘, e.clientX, e.clientY); 7 console.log(‘相对于浏览器整个页面的位置：‘, e.pageX, e.pageY); 8 console.log(‘相对于当前元素的位置：‘, e.offsetX, e.offsetY); 9 }; 10 </script> 11 </body>
3. 拖拽案例
1 <body> 2 <div></div> 3 <script> 4 var login = document.querySelector(‘.login‘); 5 var tip = document.querySelector(‘.tip‘); 6 tip.onmousedown = function(e) { 7 var x = e.offsetX; 8 var y = e.offsetY; 9 document.onmousemove = function (e) { 10 login.style.left = e.clientX - x + ‘px‘; 11 login.style.top = e.clientY - y + ‘px‘; 12 } 13 }; 14 tip.onmouseup = function() { 15 document.onmousemove = null; //解绑 16 } 17 </script> 18 </body>
4. 键盘事件相关属性
1）键盘事件类型
- onkeydown 键盘按下事件
- onkeyup 键盘弹起事件
一般给 document 绑定键盘事件。
2）键盘事件对象：（区分键盘按下了哪个键）
- 事件对象.keyCode 获取键盘按键对应的键码值
- 事件对象.altKey 表示alt键是否按下，返回布尔值。
- 事件对象.shiftKey 表示shift键是否按下，返回布尔值。
- 事件对象.ctrlKey 表示ctrl键是否按下，返回布尔值。（true按下，false没有按下）
1 <script> 2 document.onkeydown = function(e) { 3 // console.log(e.keyCode); //获得键码值 4 var num = e.keyCode; 5 if(e.ctrlKey && e.keyCode==67) { //ctrlKey默认为ture 6 alert(‘请登陆！‘); 7 } 8 }; 9 </script>
以上是关于事件对象（鼠标键盘）的主要内容，如果未能解决你的问题，请参考以下文章