event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!
获取event对象(兼容性写法)-----var oEvent=ev||event;
event 对象用来获取事件的详细信息:
举例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>举例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; }