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

来源：互联网发布：死而有知编辑：程序博客网时间：2024/05/16 14:53

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

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

阅读全文

0 0