第53天：鼠标事件、event事件对象
-->鼠標事件
-->event事件對象
-->默認事件
-->鍵盤事件（keyCode）
-->拖拽效果
一、鼠標事件
onclick ---------------鼠標點擊事件
oncontextmenu------鼠標右鍵點擊
onmouseover --------鼠標移上
onmouseout ---------鼠標移出
onmousedown -------鼠標按下
onmousemove -------鼠標移動
onmouseup ----------鼠標抬起
二、event事件對象
event對象只在事件發生的過程中才有效
用途：需要獲取和事件相關的信息時使用
如：
獲取鍵盤按下或彈起的按鍵
獲取鼠標的位置坐標
獲取事件名稱
獲取事件生成的日期時間
等等......
event對象中包含了所有與事件相關的信息
所有瀏覽器都支持event對象，只是支持的方式不一樣
- FireFox、Chrome等瀏覽器要獲取到event對象，需要從函數中傳入，參數名隨意
- 而IE在瀏覽器中event作為window對象的一個屬性存在，可以直接使用 event 或 window.event
例如：
document.οnmοusedοwn=function (?ev?){
var Event = ev || window.event ; //兼容各個瀏覽器
alert( Event.clientX ) ;// 彈出鼠標相對窗口的X軸坐標
console.log(Event);
};
關于使用event事件的兼容寫法:
三、默認事件
阻止默認事件（阻止使用右鍵事件）
document.oncontextmenu = function(ev) {?
var Event=ev||window.event;
if (Event.preventDefault) {
//阻止默認動作(W3C)
Event.preventDefault();
} else{
//IE中阻止默認動作
Event.returnValue=false;
};
alert('禁止使用右鍵！');
}
四、鍵盤事件（keyCode）
document.οnkeydοwn=function (ev){
var Event=ev||window.event;
alert(Event.keyCode);
}
組合鍵： ctrl + c
Event.ctrlKey&&Event.keyCode==67
<禁止復制>的練習：
<body><p id="con">我要的只是簡單地，只是誠實的，好好享受平凡，會好的，一定會好的！我要的只是你愛我，可不是你恨我，哪來的那么多麻煩!</p> </body> <script>var con=document.getElementById('con'); /*阻止元素右擊事件*/con.oncontextmenu=function(ev){var Event=ev||window.event;if (Event.preventDefault) {//阻止默認動作(W3C) Event.preventDefault();} else{//IE中阻止默認動作 Event.returnValue=false;};alert('禁止使用右鍵！');} /*阻止ctrl+c操作*/document.onkeydown=function(ev){var e=ev||window.event;if (e.ctrlKey&&e.keyCode==67) {if(e.preventDefault()){e.preventDefault();}else {e.returnValue=false;}alert('不能這樣操作!');}} /*阻止鼠標按下操作*/document.onmousedown=function(ev){var e=ev||window.event;if (e.preventDefault()) {e.preventDefault();} else {e.returnValue=false;}alert('禁止鼠標按下!')} </script>五、拖拽效果
主要知識點：
onmousedown onmousemove onmouseup
event.clientX ? event.clientY
offset client 系列屬性
?鼠標拖拽_T:
<head> <meta charset="UTF-8"> <title>鼠標拖拽_T</title> <style> *{margin:0;padding:0;list-style: none;} #dot{width:80px;height:80px;line-height: 30px;text-align: center;font-size:24px;background: #D00000;color:#fff;cursor:move;position:absolute;left:300;top:100; } </style> </head> <body><div id="dot"></div> </body> <script>var dot=document.getElementById('dot');var x,y;var xStart,yStart;var xEnd,yEnd;dot.onmousedown=function(ev){var e=window.event||ev;x=e.offsetX;y=e.offsetY;dot.onmousemove=function(ev){var e=window.event||ev;var xEnd=e.clientX-x;var yEnd=e.clientY-y;dot.style.left=xEnd+'px';dot.style.top=yEnd+'px';}}dot.onmouseup=function(){dot.onmousemove=null;} </script>鼠標拖拽_M
1 <head> 2 <meta charset="UTF-8"> 3 <title>鼠標事件</title> 4 <style> 5 *{margin:0;padding:0;list-style: none;} 6 #dot{ 7 width:80px; 8 height:80px; 9 line-height: 30px; 10 text-align: center; 11 font-size:24px; 12 background: #D00000; 13 color:#fff; 14 cursor:move; 15 position:absolute; 16 /* left:0; 17 top:0; */ 18 } 19 </style> 20 </head> 21 <body> 22 <div id="dot"></div> 23 </body> 24 <script> 25 var dot=document.getElementById('dot'); 26 var x,y; 27 var l1,t1; 28 var lm,tm; 29 var le,te; 30 var a=true; 31 dot.onmousedown=function(ev){ 32 a=true; 33 var e=window.event||ev; 34 x=e.offsetX; 35 y=e.offsetY; 36 l1=e.clientX-x; 37 t1=e.clientY-y; 38 dot.style.left=l1+'px'; 39 dot.style.top=t1+'px'; 40 console.log(x,y); 41 } 42 dot.onmousemove=function(ev){ 43 if(a){ 44 var e=window.event||ev; 45 var lm=e.clientX-x; 46 var tm=e.clientY-y; 47 dot.style.left=lm+'px'; 48 dot.style.top=tm+'px'; 49 } 50 } 51 dot.onmouseup=function(ev){ 52 a=false; 53 } 54 </script>?
轉載于:https://www.cnblogs.com/le220/p/7668342.html
總結
以上是生活随笔為你收集整理的第53天：鼠标事件、event事件对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java日志框架log4j详细配置及与s
- 下一篇： 最有二叉树 哈夫曼树