JavaScript 中常见HTML事件

最新推荐文章于 2021-10-09 11:50:18 发布

书和咖啡

最新推荐文章于 2021-10-09 11:50:18 发布

阅读量1.1k

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ivenqin/article/details/106896156

版权

本文介绍了JavaScript中常见的HTML事件，包括onclick、onchange、onload、onmouseover、onmouseout和onkeydown事件，并提供了详细的示例代码，展示了如何利用这些事件响应用户行为和浏览器行为。

摘要由CSDN通过智能技术生成

HTML 事件就是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为。我们可以使用 JavaScript 触发这个事件。

下面是常用的HTML事件：

onclick：用户点击 HTML 元素。
onchange：HTML 元素改变
onload：浏览器已完成页面的加载。
onmouseover：用户在一个HTML元素上移动鼠标。
onmouseout：用户从一个HTML元素上移开鼠标。
onkeydown：用户按下键盘按键。

onclick事件

onclick 即点击事件，会在元素被点击时发生，支持 onclick 事件的元素有很多，但是我们一般会在按钮上使用这个事件，点击按钮触发某个事件。

示例：

例如下面代码，当我们点击按钮时，改变相应文本的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
  <p>单击按钮触发点击事件</p>
  <button onclick="clickFun()">点击按钮</button>
  <p id="con">如果你点击按钮，我将变成一直小兔兔~</p>
</div>
<script>
  function clickFun(){
    
    document.getElementById("con").innerHTML = "耶，我变成小兔兔啦！";
  }
</script>
</body>   
</html>

在浏览器中预览效果：

那上述 gif 图中的效果是怎么实现的呢？既然我们要实现点击按钮改变文本内容，那么首先就需要一个按钮：

<button onclick="clickFun()">

最低0.47元/天解锁文章

书和咖啡

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 中常见HTML事件

HTML 事件就是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为。我们可以使用 JavaScript 触发这个事件。下面是常用的HTML事件：onclick：用户点击 HTML 元素。onchange：HTML 元素改变onload：浏览器已完成页面的加载。onmouseover：用户在一个HTML元素上移动鼠标。onmouseout：用户从一个HTML元素上移开鼠标。onkeydown：用户按下键盘按键。onclick事件onclick 即点击事件，会在元素被点击
复制链接

扫一扫

专栏目录