相关阅读:
JavaScript事件学习小结(五)js中事件类型之鼠标事件
//www.jb51.net/article/86259.htm
JavaScript事件学习小结(一)事件流
//www.jb51.net/article/86261.htm
javaScript事件学习小结(四)event的公共成员(属性和方法)
//www.jb51.net/article/86262.htm
JavaScript事件学习小结(二)js事件处理程序
//www.jb51.net/article/86264.htm
JavaScript事件学习小结(三)js事件对象
//www.
JavaScript事件是Web开发中不可或缺的一部分,它允许我们对用户的交互做出响应。事件对象(event object)是事件发生时,浏览器自动生成的一个对象,包含了与事件相关的各种信息,如事件类型、事件源等。本篇文章主要探讨JavaScript事件对象,以及在不同浏览器环境下的使用方式。
一、事件对象的基本认识
事件对象`event`包含了与特定事件相关的一系列数据。例如,鼠标点击事件会产生一个包含鼠标位置和按钮状态的事件对象,键盘事件则包含按键信息。在DOM(文档对象模型)中,事件处理函数通常会将事件对象作为参数传递。而在Internet Explorer(IE)的老版本中,事件对象是全局的`window.event`属性。
二、HTML事件处理程序中的事件对象
在HTML内直接设置的事件处理程序(DOM0级),如`onclick`,可以通过`event`变量直接访问事件对象。例如:
```html
<input id="btn" type="button" value="click" onclick="console.log('html事件处理程序' + event.type)">
```
这将在控制台打印出事件类型,如“click”。
三、DOM中的事件对象
在DOM0级和DOM2级事件处理程序中,事件对象作为函数参数传递。例如:
```javascript
var btn = document.getElementById("btn");
btn.onclick = function(event) {
console.log("DOM0 & click");
console.log(event.type); // click
};
btn.addEventListener("click", function(event) {
console.log("DOM2 & click");
console.log(event.type); // click
}, false);
```
在这里,`addEventListener`接受事件类型、处理函数和一个可选的布尔值,用于决定事件是否冒泡。
四、IE中的事件对象
1. DOM0级方法:
在IE中,虽然事件处理函数也可以通过`event`参数访问事件对象,但这个`event`不是同一个引用,而是与`window.event`不同。例如:
```javascript
var btn = document.getElementById("btn");
btn.onclick = function(event) {
var event1 = window.event;
console.log('event1.type=' + event1.type); // event1.type=click
console.log('event.type=' + event.type); // event.type=click
console.log('event1==event?' + (event == event1)); // event1==event?false
};
```
这里,尽管`event.type`和`window.event.type`相同,但`event`和`window.event`是两个不同的对象。
2. `attachEvent`方法:
IE特有的`attachEvent`方法也会将事件对象作为参数传递给处理函数,而不是通过`window.event`:
```javascript
var btn = document.getElementById("btn");
btn.attachEvent("onclick", function(type) {
console.log(event.type); // click
});
```
关于提问中的疑惑:
1. 为何DOM0级事件处理程序中,即使`event.type`相同,`event`和`window.event`仍不相同?
这是因为在非IE浏览器中,事件对象是作为参数传递给处理函数的,而在IE中,`event`是全局的`window.event`。因此,即使两者属性相同,它们实际上是两个不同的对象实例。
2. 通过`attachEvent`添加的事件处理程序中的`event`和`window.event`有何关系?
在IE中,`attachEvent`方法不会像DOM0级那样自动将事件对象绑定到`event`变量,而是将其作为第一个参数传递给处理函数。因此,你需要直接在处理函数中使用`event`参数来访问事件对象,而此时`window.event`仍然可用,但它们是两个独立的对象。
总结,理解JavaScript事件对象及其在不同浏览器环境下的行为是实现跨浏览器事件处理的关键。熟悉这些差异可以帮助开发者编写更兼容的代码,确保在多种浏览器上运行良好。