问题由来
经常在阅读代码时候发现这样的函数
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 | 被触发的事件类型 |
需要注意的是currentTarget
和target
属性,如果触发事件的元素就是绑定了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 | 被触发的事件类型 |