JS事件

最新推荐文章于 2025-05-07 13:25:20 发布

原创最新推荐文章于 2025-05-07 13:25:20 发布 · 97 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS事件

Javascript 专栏收录该内容

48 篇文章

订阅专栏

本文深入讲解事件处理的基础概念，包括事件源、事件类型和事件处理程序三要素，以及如何在JavaScript中实现事件绑定和响应机制。通过具体实例，读者可以了解如何使用element.on事件名=function(){}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 事件基础

1.1. 事件三要素

事件源（谁）：触发事件的元素

事件类型（什么事件）：例如 click 点击事件

事件处理程序（干什么）：事件触发后要执行的代码(函数形式)，事件处理函数

语法：

    element.on事件名=function(){}

案例代码：

    <body>
        <button id="btn">测试</button>
        <script>
            //(1) 事件源 
            var btn = document.getElementById('btn');
            //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
            //(3) 事件处理程序  通过一个函数赋值的方式 完成
            btn.onclick = function() {
                alert('测试');
            }
        </script>
    </body>

1.2. 执行事件的步骤

添加事件过程

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

事件是触发响应机制：

用户触发：由用户触发事件
js引擎响应：由js引擎调用事件处理程序

    <body>
        <div>测试</div>
        <script>
            // 1. 获取事件源
            var div = document.querySelector('div');
            // 2.绑定事件 注册事件
            // div.onclick 
            // 3.添加事件处理程序 
            div.onclick = function() {
                console.log('我被选中了');
            }
        </script>
    </body>