当前位置：首页 > news >正文

5.2.1 javascript 事件对象.内容补充.

news 2025/7/26 12:48:43

上接5.2 js的加载和 dom事件_可执行脚本的dom标签-CSDN博客

在 Web 开发里，event 对象存有与事件相关的信息，像事件类型、触发事件的元素、鼠标位置等。不同浏览器对 event 对象的处理存在差异，尤其是 IE8 及更早版本。下面详细解释 event 对象，同时给出兼容现代浏览器和 IE8 的示例。

1. 现代浏览器中的 `event` 对象

在现代浏览器（如 Chrome、Firefox、Safari 以及 IE9+）里，当给事件处理函数注册事件时，浏览器会自动把 event 对象作为第一个参数传递给该函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="handleClick(event)">点击我</button><script>
function handleClick(e) {// e 即为 event 对象console.log('Button clicked, event type is: ' + e.type);console.log('Event target is: ', e.target);
}
</script>
</body>
</html>

2. IE8 及更早版本中的 `event` 对象

在 IE8 及更早版本中，event 对象并非作为参数传递给事件处理函数，而是作为 window 对象的一个属性存在，即 window.event。

兼容现代浏览器和 IE8 的实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="handleClick(event)">点击我</button><script>
function handleClick() {// 兼容现代浏览器和 IE8console.log(window.event)console.log(arguments[0])var e = window.event || arguments[0];// 获取事件类型var eventType = e.type;console.log('Button clicked, event type is: ' + eventType);// 获取事件目标元素，IE8 使用 srcElementvar target = e.target || e.srcElement;console.log('Event target is: ', target);// 获取鼠标点击位置var clientX = e.clientX;var clientY = e.clientY;console.log('Mouse click position: (' + clientX + ', ' + clientY + ')');
}
</script>
</body>
</html>

查看全文

http://www.dtcms.com/a/298561.html