当我们在DOM上面触发一个事件的时候，就会调用对应的事件处理函数，这个时候会产生一个事件对象，我们叫做event，这个对象中有着很多的信息，我们来看一看 都有些啥子 先从DOM0级事件处理说起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box">aa</div> <script type="text/javascript"> var box=document.getElementById('box'); box.onclick=function(event){ alert(event.type) //"click" } </script> </body> </html>
说明一下，这个event是这个事件函数自动产生的，我可以不叫做event，换成任何名字都可以的
var box=document.getElementById('box'); box.onclick=function(ss){ alert(ss.type) //"click" }
至于这个event对象，到底怎么来的，我也不知道，只是知道有这个东西。
说完了DOM0级事件对象，再来看看DOM2级事件对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box">aa</div> <script type="text/javascript"> var box=document.getElementById('box'); box.addEventListener('click',function(s){ alert(s.type) //"click" }) </script> </body> </html>
同理，这里我们传入进去了参数是s,这个参数代表了我们的事件对象，他有一个type属性，用来查看事件类型
虽然我们可以用任何的变量去接收这个事件对象，但是我们通常情况下，用的是event，约定俗成
这个event对象都有些什么属性？
具体查看这个链接 http://www.w3school.com.cn/jsref/dom_obj_event.asp
有两个属性需要区分
target与currentTarget
target:事件的目标
currentTarget：处理程序当前正在处理事件的那个元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box">aa</div> <script type="text/javascript"> var box=document.getElementById('box'); box.addEventListener('click',function(event){ alert(event.target==event.currentTarget) //true }) document.body.addEventListener('click',function(event){ alert(event.target==event.currentTarget) //false }) </script> </body> </html>
事件是触发在box上面的，这个是实际的目标，也就是target的指向，currentTarget代表当前正在处理事件的对象，当事件冒泡到body上面的时候
currentTarge就指向了body，但是target不会变化，永远指向的都是box
stopPropagation方法和bubbles属性
stopPropagation：取消事件冒泡
bubbles：只读属性，只有这个属性为true，才能使用stopPropagation()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box">aa</div> <script type="text/javascript"> var box=document.getElementById('box'); box.addEventListener('click',function(event){ event.stopPropagation() alert("box") //"box" }) document.body.addEventListener('click',function(event){ alert("body") //不会弹出"body" }) </script> </body> </html>
event.preventDefault()方法和cancelable属性
preventDefault：取消事件的默认行为
cancelable：只读属性，表明是否可以使用preventDefault()方法
什么时候会用到这个方法呢？比如说，链接的默认行为是跳转，如果你不想跳转，那就可以用这个方法了
刚刚说晚了DOM0级和DOM2级的事件对象，来看看IE的事件对象
在IE浏览器之下，我们可以有多种处理
var box=document.getElementById('box'); box.onclick=function(){ var event=window.event alert(event.type) //"click" }
在使用DOM0级的方法添加事件处理程序的时候，这个event对象，是window对象的一个属性存在的
但是，如果我们是用attachEvent()添加的，那么就会有一个event对象传入到这事件处理函数
var box=document.getElementById('box'); box.attachEvent("onclick",function(event){ alert(event.type) //"click" })
注意看，由于第一中情况，是作为window对象的属性存在的，这个函数是没有传入参数的，第二个函数是传入了一个event对象参数的
来看看这个IE浏览器下的event都有什么属性
srcElement ：事件的目标，类似于target属性
type：事件的类型
returnValue：这个布尔值类型，默认为true，如果将这个设置为false，就可以用来取消事件的默认行为，类似于preventDefault()方法
cancelBubble：布尔值类型，默认情况是false，设置为true，可以用来阻止事件冒泡，与stopPropagation()方法的用处一样
function getEvent(event){ return event?event:window.event }
function getTarget(event){
return event.target||event.srcElement
}
function prevent(event){
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue=false
}
}
function cancel(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble=true
}
}
上面是跨浏览器的一些兼容性的问题。一清二楚，很简单的封装