js event对象|极客笔记

js event对象

引言

在Javascript中，事件（event）起着非常重要的作用。事件是指在网页加载过程中发生的各种交互行为，例如鼠标点击、键盘输入、页面加载等。事件的处理是通过事件对象来实现的。本文将详细介绍Javascript中的event对象，包括事件的类型、属性、方法等内容。

1. 事件对象概述

1.1 事件的概念

在网页中，事件是指用户和浏览器之间的一种交互行为。当用户对网页进行操作时，例如点击鼠标、按下键盘等，浏览器会触发相应的事件，通过事件对象来获取并处理这些事件。

1.2 事件对象的定义

事件对象（event object）是在触发事件时由浏览器自动创建的一个对象。它包含了与该事件相关的信息，例如事件的类型、触发该事件的元素、鼠标点击位置等。

1.3 事件对象的作用

事件对象在Javascript中具有重要的作用。通过事件对象，我们可以获取到触发事件的元素、事件的类型以及其他相关的信息，从而可以对事件进行准确的处理和响应。

2. 事件对象的属性

在Javascript中，事件对象提供了一系列的属性，用于获取与事件相关的信息。下面是一些常用的事件对象属性：

2.1 target属性

target属性用于获取触发事件的元素。该属性返回的是一个对象，可以通过该对象的属性和方法获取到更多关于该元素的信息。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>事件对象示例</title>
    <script>
        function handleClick(event) {
            var target = event.target;
            console.log(target.innerText);
        }
    </script>
</head>
<body>
    <button onclick="handleClick(event)">点击按钮</button>
</body>
</html>

运行结果：

点击按钮

2.2 type属性

type属性用于获取事件的类型。事件的类型可以是各种交互行为，例如”click”表示鼠标点击事件，”keydown”表示键盘按下事件等。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>事件对象示例</title>
    <script>
        function handleClick(event) {
            var eventType = event.type;
            console.log(eventType);
        }
    </script>
</head>
<body>
    <button onclick="handleClick(event)">点击按钮</button>
</body>
</html>

运行结果：

click

2.3 pageX和pageY属性

pageX和pageY属性用于获取事件发生时鼠标的位置，以页面左上角为原点，向右为X轴正方向，向下为Y轴正方向。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>事件对象示例</title>
    <script>
        function handleMouseClick(event) {
            var pageX = event.pageX;
            var pageY = event.pageY;
            console.log("X: " + pageX + ", Y: " + pageY);
        }
    </script>
</head>
<body onclick="handleMouseClick(event)">
    <p>点击页面任意位置</p>
</body>
</html>

运行结果：

X: 123, Y: 234

3. 事件对象的方法

除了属性之外，事件对象还提供了一些方法，用于处理和改变事件的行为。下面是一些常用的事件对象方法：

3.1 preventDefault()方法

preventDefault()方法用于取消事件的默认行为。例如，在表单提交事件中调用preventDefault()方法可以阻止表单的默认提交行为。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>事件对象示例</title>
    <script>
        function handleSubmit(event) {
            event.preventDefault();
            console.log("阻止表单提交");
        }
    </script>
</head>
<body>
    <form onsubmit="handleSubmit(event)">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

运行结果：

阻止表单提交

3.2 stopPropagation()方法

stopPropagation()方法用于停止事件在DOM树中的传播。当事件发生时，它会沿着DOM树的节点进行传播，直到遇到事件处理函数或到达根节点。调用stopPropagation()方法可以停止事件的传播，防止事件被其他节点捕获。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>事件对象示例</title>
    <script>
        function handleClick(event) {
            event.stopPropagation();
            console.log("点击按钮");
        }

        function handleDocumentClick(event) {
            console.log("点击文档");
        }
    </script>
</head>
<body onclick="handleDocumentClick(event)">
    <button onclick="handleClick(event)">点击按钮</button>
</body>
</html>

运行结果：

点击按钮

结论

通过本文的介绍，我们了解了Javascript中的event对象。event对象是在触发事件时由浏览器自动创建的，它提供了一系列的属性和方法，用于获取和处理与事件相关的信息。我们可以通过事件对象获取到触发事件的元素、事件的类型以及其他相关的信息，从而对事件进行准确的处理和响应。深入了解事件对象的属性和方法，可以使我们更加灵活地编写交互性强的网页应用程序。