JavaScript---event对象及冒泡事件、鼠标事件、键盘事件、默认行为

mac2024-06-01  55

event对象

event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!

获取event对象(兼容性写法)-----var oEvent=ev||event;

event 对象用来获取事件的详细信息:

获取鼠标位置:【oEvent.clientX】、【oEvent.clientY

document.onclick = function(ev) { var oEvent = ev || event; alert(oEvent.clientX + ',' + oEvent.clientY); }

举例1:跟随鼠标移动的div

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> </head> <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background: #ccc; position: absolute; } </style> <body> <div id="box"></div> </body> <script> // 跟随鼠标移动的div document.onmousemove = function(ev) { var e = ev || event var oBox = document.getElementById("box") oBox.style.left = e.clientX + "px" oBox.style.top = e.clientY + "px" } </script> </html>

获取键盘按键:【oEvent.keyCode】

document.onkeydown = function(ev) { var oEvent = ev || event; alert(oEvent.keyCode); }

举例1:键盘控制div上下左右移动

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> </head> <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background: #ccc; position: absolute; } </style> <body> <div id="box"></div> </body> <script> // 键盘事件 document.onkeydown = function(ev) { var e = ev || event var oBox = document.getElementById("box") //← 37 ; →39 ; ↑ 38; ↓40 if (e.keyCode == 37) { oBox.style.left = oBox.offsetLeft - 10 + "px" } if (e.keyCode == 39) { oBox.style.left = oBox.offsetLeft + 10 + "px" } if (e.keyCode == 38) { oBox.style.top = oBox.offsetTop - 10 + "px" } if (e.keyCode == 40) { oBox.style.top = oBox.offsetTop + 10 + "px" } } </script> </html>

事件冒泡

当事件发生后,这个事件就要开始传播(从里到外或者从外向里)

cancelBubble-------取消冒泡,阻止浏览器默认的事件冒泡行为。

window.onload = function(){ var oBtn = document.getElementById("btn"); var oDiv = document.getElementById("div1"); oBtn.onclick = function(ev){ var oEvent = ev||event; oDiv.style.display = "block"; oEvent.cancelBubble=true; } document.onclick = function(){ oDiv.style.display = "none"; } }

默认行为

浏览器自带的功能,比如网页右键自动弹出菜单。在输出框中敲击键盘,自动输出敲击的数值,这些都是默认行为。

阻止默认行为------普通写法:return false;

举例1:屏蔽默认右键菜单,并自定义右键菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> </head> <style> * { margin: 0; padding: 0; } #ul1 { width: 100px; background: #ccc; border: 1px solid black; position: absolute; display: none; } </style> <body> <ul id="ul1"> <li>登陆</li> <li>注销</li> </ul> </body> <script> // 屏蔽默认右键菜单,并自定义右键菜单 document.oncontextmenu = function(ev) { var oEvent = ev || event var oUl = document.getElementById("ul1") oUl.style.display = "block" oUl.style.left = oEvent.clientX + "px" oUl.style.top = oEvent.clientY + "px" return false } document.onclick = function() { var oUl = document.getElementById("ul1") oUl.style.display = "none" } </script> </html>

举例2. 阻止onkeydown,即无法进行输入。

window.onload=function (){ var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function (){ return false; }; };

举例3. 只能输入数字的输入框

if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)){ return false; }

 

最新回复(0)