document.createelement如何绑定点击事件_Web API - DOM事件

最新推荐文章于 2023-11-09 09:20:03 发布

梁边妖

最新推荐文章于 2023-11-09 09:20:03 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： document.createelement如何绑定点击事件

本文链接：https://blog.csdn.net/weixin_29876887/article/details/112091708

本文介绍DOM事件，特别是如何使用`document.createElement`创建元素并绑定点击事件。内容涵盖事件的基本概念、事件监听的执行机制以及常用事件监听方法的示例，包括HTML元素属性和DOM对象属性的绑定方式。

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

好好学习，天天向上

本章主要是：了解事件

一、事件

事件：在什么时候做什么事
执行机制：触发--响应机制
绑定事件(注册事件)三要素：
- 1、事件源：给谁绑定事件
- 2、事件类型：绑定什么类型的事件 click 单击
- 3、事件函数：事件发生后执行什么内容，写在函数内部

二、事件监听

JavaScript 解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立刻执行事件函数。

常用事件监听方法

绑定 HTML 元素属性
绑定 DOM 对象属性

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 绑定 html 元素属性 -->
    <!-- 外部双引号，内部使用单引号，避免冲突 -->
    <input type="button" value="点击有惊喜" onclick="alert('什么惊喜呀！！')">
    <input type="button" id="btn" value="点击有惊喜">
    <script>
        // 绑定 DOM 对象属性
        // 获取元素
        var btn = document.getElementById("btn");
        // 添加事件
        // 这个属性的属性值是一个匿名函数，这个函数封装事件被触发的事情
        btn.onclick = function (){
            // 定义的是事件被触发后要做的事情
            alert("到底是什么惊喜哦！！！");
        };
    </script>
</body>
</html>

示例图：

常用的鼠标事件类型

onclick	鼠标左键单击触发
ondbclick	鼠标左键双击触发
onmousedown	鼠标按键按下触发
onmouseup	鼠标按键放开时触发
onmousemove	鼠标在元素上移动触发
onmouseover	鼠标移动到元素上触发
onmouseout	鼠标移出元素边界触发