DOM—事件基础

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

coder-lxy

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

阅读量93

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/qq_46178261/article/details/105256906

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

4.事件基础

4.1 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

4.2事件组成

事件由三部分组成（事件三要素）：

事件源：事件被触发的对象，谁，比如按钮
事件类型：如何触发，什么事件，比如鼠标点击（onclick）鼠标经过键盘按下
事件处理程序：通过一个函数赋值的方式完成

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //(1) 事件源：事件被触发的对象，谁，比如按钮
        vsr btn = document.getElementById('btn');
        //(2) 事件类型:如何触发，什么事件，比如鼠标点击（onclick） 鼠标经过 键盘按下
        //(3)事件处理程序：通过一个函数赋值的方式完成
        btn.onclick = function() {
            alert("点秋香");
        }
    </script>
</body>

4.3 执行事件的步骤

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

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