JavaScript-----事件监听_js 监听css 点击-优快云博客

本文介绍了HTML用于网页内容结构化的概念，CSS用于样式应用，以及JavaScript在创建动态交互中的作用。通过实例展示了如何在HTML中添加事件监听器，如点击事件，实现用户输入名字后动态更新内容。

1.HTML，CSS，JavaScript含义

HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

CSS是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。

JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多

2.事件监听

html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
             font-family: "helvetica neue", helvetica, sans-serif;
             letter-spacing: 1px;
             text-transform: uppercase;
             text-align: center;
             border: 2px solid rgb(0 0 200 / 0.6);
             background: rgb(0 0 200 / 0.6);
             color: rgb(255 255 255 / 1);
             box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
             border-radius: 10px;
             padding: 3px 10px;
             display: inline-block;
             cursor: pointer;
}
    </style>
    
</head>
<body>
    <p>你好: 新用户</p>
    <script src="scripts/main1.js" defer></script>
</body>
</html>

js文件内容：

const para = document.querySelector("p");
para.addEventListener("click", updateName);
function updateName() {
     const name = prompt("请输入您的名字");
     para.textContent = `你好啊: ${name}`;
}

这里我们选定一个文本段落，然后给它附上一个事件监听器，在它被点击时，updateName() 代码块便会运行。updateName() 代码块（这类可以重复使用的代码块称为“函数”）向用户请求一个新名字，然后把这个名字插入到段落中以更新显示。

第一行：声明变量para，找到p标签赋值给para

第二行：点击，更新内容

基本语法: element.addEventListener(event, function, useCapture);

- event:指定需要监听的事件类型,比如click、keydown等。也可以是自定义事件。

- function:要执行的函数,也就是事件处理函数。

- useCapture:可选参数,布尔值,指定事件是在捕获阶段(true)还是冒泡阶段(false)触发。

第三行：创建名为updateName的函数

第四行：在弹窗输入内容赋值给name

第五行：把para内容更新为你好啊：输入的名字

结果展示：