js 事件学习笔记 javaScript 点击事件键盘事件鼠标事件

最新推荐文章于 2023-12-28 16:28:26 发布

技术林

最新推荐文章于 2023-12-28 16:28:26 发布

阅读量199

点赞数

分类专栏：总结笔记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45810135/article/details/108925438

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

总结

27 篇文章 1 订阅

订阅专栏

本文介绍了HTML事件的基础知识，包括事件源、事件类型和执行指令。通过一个具体的案例展示了如何利用JavaScript为按钮元素绑定单击事件，当用户点击按钮时弹出提示框显示消息。这个案例详细解释了如何在网页加载完成后获取DOM元素并设置事件监听器。

摘要由CSDN通过智能技术生成

事件概述：

事件三要素：

事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
执行指令：事件触发后需要执行的代码，一般使用函数进行封装语法格式：事件源.事件类型=执行指令

常用的事件
在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
 
    <script>
        // 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
        // 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.
        window.onload = function () {
 
            // 获取页面的 btn 按钮
            var btn = document.getElementById("btn");
            // alert(btn);
 
            // 给 btn 按钮绑定一个事件 (单击事件 onclick)
            // 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
            btn.onclick = function () {
                alert("恭喜你, 中了 500 万!");
            }
        }
 
    </script>
 
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>