[回顾]事件对象——event

386 阅读1分钟

问题由来

经常在阅读代码时候发现这样的函数

var btn = document.getElementById('btn');
btn.onclick = function (e) {
    ...一些操作;
}
$("#btn").on('click',function(event){
    ...一些操作;
});
//参数e有时候也会写作event,这个参数究竟是什么?

问题解释

实际上这个东西叫做 事件对象,关于它的定义:

在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。

所有的浏览器都支持event对象但是不同的浏览器下的表现是不同的,没错,分为IE和其他两种...

1.DOM中的event

event对象的部分属性和方法
属性/方法 说明
currentTarget 正在处理事件的元素
target 事件的目标(触发事件的元素)
preventDefault() 取消事件的默认行为
stopPropagation() 取消事件的进一步捕获或冒泡
type 被触发的事件类型

需要注意的是currentTargettarget属性,如果触发事件的元素就是绑定了DOM事件的元素的话,它们就是一致的,但是在某些情况下,它们并不一样。

例如:
**html**
<button id='body'>点击body</button>

**js**
var body = document.getElementsByTagName('body')[0];
body.onclick = function(e){
  console.log(e.target.tagName,e.currentTarget.tagName)
}
>"BUTTON" "BODY"
//触发事件的是Button元素,处理事件的是Body元素

2.IE中的event

同样的,IE中的event对象也有一些属性和方法,这里特指<=IE8以下的只支持事件捕获的浏览器版本。

属性/方法 说明
cancelBubble 布尔值,默认为false,设置为true可以取消事件冒泡
returnValue 布尔值,默认为true,设置为false取消事件默认行为
srcElement 事件的目标(触发事件的元素)
type 被触发的事件类型