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.οnlοad=function (){
var oTxt=document.getElementById('txt1');
oTxt.οnkeydοwn=function (){
return false;
};
};举例3. 只能输入数字的输入框
if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)){
return false;
}