1.鼠标事件
onmousedown ⿏标按下的时候触发的事件
onmouseup 当⿏标按下后 抬起的时候发⽣的事件
onmousemove 当⿏标移动的时候发⽣
onmouseover 当⿏标移⼊的时候触发
onmouseout 当⿏标移出对象的时候触发
onclick 当⿏标单击的时候触发
ondblclick 当⿏标双击的时候触发
2.键盘事件
onkeydown 当键盘按下的时候触发
onkeyup 当键盘按下抬起的⼀瞬间触发
3.表单事件
onsubmit 当⽤户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回⼀个false，就会阻⽌表单提交，表单就不会发送数据到服务器。
onchange 修改表单字段的时候触发该事件
onfocus 当获取到焦点到时候触发
onblur 当失去焦点的时候触发
4.窗⼝事件
onload 元素加载完成时触发,常⽤的就是window.onload
window.onload = function(){
//等⻚⾯加载完成时执⾏这⾥的代码
}
onresize 当浏览器窗⼝改变的时候触发
window.onresize = function(){
alert(1)
}
5.event对象
event对象代表事件的状态，当事件发⽣的时候⽤来记录事件的详细信息，类似于⻜机的⿊匣⼦。
在ie和chrome中，事件对象（event）是⼀个内置的全局对象，必须在事件调⽤的时候才有值，如果没有事件调⽤，event没有值，在firefox中event对象没有被定义，如果⼀个函数被事件调⽤，那么这个事件函数中的第⼀个参数就是event对象，这也是标准浏览器下的处理⽅式，在⾮标准下，这种⽅式不被采⽤.
总结：在⾮标准下，使⽤被定义好的event内置对象，在标准下使⽤事件函数中的第⼀个参数，假设传⼊的第⼀个参数为e，可以⽤逻辑或做兼容，var e = e || event
5.1.event对象上的属性 clientX,clientY
clientX 事件属性返回当事件被触发时⿏标指针向对于浏览器⻚⾯（或客户区）的⽔平坐标。clientY 事件属性返回当事件被触发时⿏标指针向对于浏览器⻚⾯（客户区）的垂直坐标。
5.2.event对象上的keycode属性
对于 keypress 事件，该属性声明了被敲击的键⽣成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使⽤的键盘的布局相关。
示例：用方向键控制box元素移动
//通过键盘控制⽅向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到box对象
var oBox = document.getElementById('box');
//定义x y轴的增量
var x = y= 0;
//键盘按下事件
document.onkeydown = function(e){
//事件兼容
var e = e || event;
//上38 下 40 左37 右39
switch(e.keyCode){
case 38:
y -= 10;
break;
case 40:
y += 10;
break;
case 37:
x -= 10;
break;
case 39:
x += 10;
break;
}
//改变偏移量
oBox.style.left = x + "px";
oBox.style.top = y + "px";
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
5.3.阻止事件冒泡
当⼀个元素接收到⼀个事件以后，会将事件传播给它的⽗级元素，它的负级元素会⼀层⼀层往上传播，直到最顶层window，这种事件传播机制叫作事件冒泡。
在实际开发中我们通常需要阻止事件冒泡，做法是将event对象上的cancelBubble属性设置成true、
兼容性写法：
function stopBubble(e) {
if(e && e.stopPropagation) { //非IE
e.stopPropagation();
} else { //IE
window.event.cancelBubble = true;
}
}
w3c：event.stopPropagation()
网友评论