【JavaScript】HTML DOM事件------onclick

最新推荐文章于 2023-10-19 22:32:47 发布

原创最新推荐文章于 2023-10-19 22:32:47 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #dom #鼠标 #点击事件 #onclick

【基础】同时被 2 个专栏收录

229 篇文章

订阅专栏

【JavaScript】

10 篇文章

订阅专栏

本文介绍了HTML DOM事件的基本类型及使用方法，并通过一个简单的示例展示了如何利用JavaScript响应网页元素的点击事件。

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

HTML DOM使得JavaScript有能力对HTML事件作出反应；
一、HTML事件有以下几类：
1.网页元素加载完毕；

网页加载完毕；
图像加载完毕；

2.鼠标移动到某个区域上；
3.鼠标点击某个区域或元素；
4.改变；

输入字段被改变；
提交HTML表单；

5.用户触发某个按键；

二、第一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>菜鸟教程</title>
</head>
<body>
<h1 onclick="this.innerHTML='北京'">中国的首都是?(点击文本，获取答案)</h1>   
</body> 
</html>

这里写图片描述

点击右上角，选择某个浏览器打开，或者运行本文件（在IntelliJ IDEA中可按Ctrl+Shift+F10直接运行）：
这里写图片描述

然后浏览器页面点击文字，获取答案，如果要再次执行，刷新页面即可；

这里写图片描述

点击之后：

这里写图片描述

分析：

<h1 onclick="this.innerHTML='北京'">中国的首都是?(点击文本，获取答案)</h1>

这里，我们看到，其作用机制是：
①点击事件的方法onclick放在标签里；一般是可以点击的标签，如标题标签<h1>到<h6> 等；
②标签的的作用可以理解为覆盖；当点击发生，前面的内容小时，点击事件方法里的内容覆盖在原来内容上，并且还是在h1里面；在本方法中，只改变内容，不改变样式；其它的情况，得具体问题，具体分析；

具体大家可以访问菜鸟教程：