JavaScript学习（13）——DOM之事件基础

2021/12/14 17:18:31

编程Tag： javascript 点击事件 Dom onclick div 13 btn

本文主要是介绍JavaScript学习（13）——DOM之事件基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

参考资料JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

一、事件概述

二、事件三要素

三、执行事件的步骤

一、事件概述

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

简单理解：触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

二、事件三要素

1. 事件源（谁）

2. 事件类型（什么事件）如何触发比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

3. 事件处理程序（做啥）通过一个函数赋值的方式完成

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

三、执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

比如下面案例：点击div 控制台输出我被选中了

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

这篇关于JavaScript学习（13）——DOM之事件基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript学习（13）——DOM之事件基础

一、事件概述

二、事件三要素

三、执行事件的步骤

相关编程文章