JavaScript DOM中的事件对象

最新推荐文章于 2023-12-24 21:07:47 发布

梁萌

最新推荐文章于 2023-12-24 21:07:47 发布

阅读量233

点赞数

分类专栏： vue js/jq 文章标签： JavaScript DOM 事件对象

本文链接：https://blog.csdn.net/liangmengbk/article/details/84453739

版权

js/jq 同时被 2 个专栏收录

57 篇文章 3 订阅

订阅专栏

vue

45 篇文章 3 订阅

订阅专栏

当触发DOM上的某个事件时，会产生一个事件对象event，在这个对象中包含所有与事件有关的信息，包括导致事件的元素、事件的类型，以及其他与特定事件相关的信息。所有浏览器都支持event对象，但支持方式不同。

实例一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="text" id="myText" value="111">
    <script type="text/javascript">
    var oText = document.getElementById("myText");
    oText.onclick = function() {
        console.log(event.target); //获取input元素对象
        console.log(event.target.value); //获取input元素的value值
    }
    </script>
</body>

</html>

结果为：

实例二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="text" id="myText" value="111">
    <script type="text/javascript">
    var oText = document.getElementById("myText");
    oText.addEventListener("click", function() {
        console.log(event.target); //获取input元素对象
        console.log(event.target.value); //获取input元素的value值
    })
    </script>
</body>

</html>

结果为：

兼容DOM的浏览器会将一个event对象传入事件处理程序。无论指定事件处理程序时使用什么方法，都会传入event对象。

点击查看：DOM的event对象的属性和方法

注意：只有在事件处理程序执行期间event对象才会存在；一旦事件处理程序执行完毕，event对象就会被销毁。