JavaScript学习笔记之JS事件对象

什么是JS事件对象

JavaScript事件对象（Event Object）是在事件被触发时由浏览器自动创建的对象，它包含了与事件相关的所有信息，我们可以通过JS事件对象来获取一些有用的信息，如事件类型、触发事件的元素、鼠标的位置等。

JS事件对象的属性

以下是JS事件对象常用的属性：

type：事件类型，如"click"、"mouseover"等；
target：触发事件的元素；
currentTarget：事件绑定的元素；
pageX：鼠标指针的水平位置，相对于文档的左侧边缘；
pageY：鼠标指针的垂直位置，相对于文档的顶部边缘；
keyCode：触发事件的按键的键码值；
shiftKey、ctrlKey、altKey：是否按下了Shift、Ctrl、Alt键。

JS事件对象的方法

以下是JS事件对象常用的方法：

preventDefault()：取消事件的默认行为；
stopPropagation()：停止事件的传播；
stopImmediatePropagation()：立即停止事件的传播。

JS事件对象的使用

以下是一个JS事件对象的使用示例：

<!DOCTYPE html>
<html>
<head>
    <title>JS事件对象使用示例</title>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick = function(event) {
            alert("触发事件的元素：" + event.target.tagName);
            alert("事件类型：" + event.type);
            alert("键码值：" + event.keyCode);
            alert("鼠标位置：" + event.pageX + "," + event.pageY);
            event.preventDefault(); //取消事件的默认行为
        }
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

以上代码中，我们给button元素绑定了一个click事件，当点击该元素时，事件会触发。在事件的处理函数中，我们用JS事件对象来获取一些有用的信息，如事件类型、触发事件的元素、键码值等，并使用event.preventDefault()方法来取消事件的默认行为。

另外一个JS事件对象的使用示例，如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS事件对象使用示例</title>
    <script type="text/javascript">
        var box = document.getElementById("box");
        box.addEventListener("mouseover", function(event) {
            event.target.style.backgroundColor = "red";
            event.stopPropagation(); //停止事件的传播
        }, false);

        document.addEventListener("mouseover", function(event) {
            event.target.style.backgroundColor = "green";
        }, false);
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

以上代码中，我们给一个div元素绑定了一个mouseover事件，并使用event.target.style.backgroundColor来修改该元素的背景色为红色。同时，在鼠标移入该元素时，还会触发document元素上的mouseover事件，我们在该事件的处理函数中使用event.target.style.backgroundColor来修改背景色为绿色。为了避免事件在document上的传播，我们使用了event.stopPropagation()方法来停止事件的传播。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript学习笔记之JS事件对象 - Python技术站