js事件驱动机制

最新推荐文章于 2024-03-12 22:19:17 发布

我爱丁丁猫

最新推荐文章于 2024-03-12 22:19:17 发布

阅读量443

点赞数

分类专栏：前端文章标签： js

原文链接：https://www.mk2048.com/blog/blog.php?id=h12011aiibaa&title=js%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8%E6%9C%BA%E5%88%B6

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

基本概念

js是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。

事件驱动原理

事件源：产生事件的地方（html元素）
事件（名称）：点击/鼠标操作/键盘操作等等
事件对象：当某个事件发生时，可能会产生一个事件对象，该事件对象会封装好该事件的信息，传递给事件处理程序
事件处理程序：响应用户事件的代码

案例1：监听鼠标点击事件，并能够显示鼠标点击的位置x,y

<html>
    <head>
        <script>
            function test(e){
                window.alert("x="   e.clientX   "y="   e.clientY);
            }
        </script>
    </head>
    <body style="width: 100px; heigth: 80px; border: 1px solid red" onmousedown="test(event)"></body>
</html>

事件对象

event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

什么时候会产生event对象？
例如当用户点击某个元素的时候，我们给这个元素注册的事件就会触发，该事件的本质就是一个函数，而函数的形参接收一个event对象。
事件通常与函数结合使用，函数不会再事件发生之前被执行

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
    alert(event.type); //"click"
}, false);

event.type属性表示事件类型。
event.currentTarget是事件处理程序当前正在处理事件的那个元素，返回绑定事件的元素，和this的作用差不多，始终返回绑定事件的元素。（事件委托返回绑定的父元素）
event.target返回触发事件的元素(可以用来事件委托)