DOM--事件基础（事件三要素）_dom操作中时间的三要素是什么-CSDN博客

本文链接：https://blog.csdn.net/qq_43968060/article/details/107561719

什么是事件？

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发–>响应机制

案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
</head>

<body>
    <button id="btn">111</button>
    <script>
        // 点击按钮，弹出对话框

        // 1.事件是由三部分组成：事件源  事件类型  事件处理程序 我们也称为事件三要素

        //获取事件源
        var btn = document.getElementById('btn');
        // 事件类型  鼠标点击 onclick
        // 事件处理程序
        btn.onclick = function() {
            alert('测试');
        }
    </script>
</body>

</html>

事件三要素

事件是由三部分组成：事件源事件类型事件处理程序我们也称为事件三要素
1.1事件源：事件被触发的对象 --按钮对象
1.2事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…
1.3事件处理程序：通过一个函数赋值的方式

执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.采用函数赋值形式添加事件处理程序
案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
</head>
<body>
    <div>111</div>
    <script>
        // 1.点击div输出div被选中
        var div = document.querySelector('div');
        // 2.绑定事件
        // div.onclick
        // 3.添加事件
        div.onclick = function() {
            console.log('div被选中');
        }
    </script>
</body>
</html>