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

本文介绍了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里面;在本方法中,只改变内容,不改变样式;其它的情况,得具体问题,具体分析;

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶洲川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值