a标签点击事件_JavaScript 中常见HTML事件

最新推荐文章于 2022-11-29 10:59:03 发布

weixin_39770165

最新推荐文章于 2022-11-29 10:59:03 发布

阅读量435

点赞数

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()">点击按钮</button>

这个按钮上通过 onclick 点击事件绑定了一个自定义的 clickFun() 函数，可以通过这个函数来改变文本内容。那我们需要在<script> 标签中定义这个函数：

function clickFun(){
    document.getElementById("con").innerHTML = "耶，我变成小兔兔啦！";
}

在这个函数中使用 document.getElementById("con").innerHTML 可以获取 id 为 con 的对象的内嵌内容。如果使用的是赋值号 =，可以向指定对象插入内容。

// 这样写可以输出id为con的元素的文本内容
console.log(document.getElementById("con").innerHTML)  

// 这样写可以向id为con的元素指定文本内容，等号右边的就是被插入的内容
document.getElementById("con").innerHTML = "耶，我变成小兔兔啦！";

onchange事件

onchange 事件会在域的内容改变时发生。onchange 事件也可用于单选框与复选框改变后触发的事件。

示例：

例如当输入框中的内容发生改变时，会显示在下面 <p> 标签中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
  <input type="text" onchange="changeFun()" id = "inputCon">
  <p>如果你在输入框中输入内容，离开输入框时内容会显示在下面：</p>
  <p id="con"></p>    
</div>
<script>
  function changeFun(){
    var content = document.getElementById("inputCon");
    document.getElementById("con").innerHTML = content.value;
  }
</script>
</body>   
</html>

在浏览器中预览效果：

在input标签中通过onchange事件绑定一个changeFun()函数：

<input type="text" onchange="changeFun()" id = "inputCon">

然后在这个函数中，先获取获取输入框中的文本，将获取到的文本值赋给变量 content：

var content = document.getElementById("inputCon");

然后将变量 content 的值，赋给 id 为 con 的对象：

document.getElementById("con").innerHTML = content.value;

onchange 事件还可以用于<keygen>、<select> 和 <textarea> 等标签中。

onload事件

onload 事件会在页面或图像加载完成后立即发生。通常用于 <body> 标签中，当页面加载完毕执行脚本代码。

示例：

例如下面这段代码，当页面加载完成时，触发我们定义好的 onloadFun 函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body onload="onloadFun()">
<div>
  onload事件的使用
</div>
<script>
  function onloadFun(){
    alert("页面加载完毕弹出！")
  }
</script>
</body>   
</html>

在浏览器中打开页面，会弹出一个弹出层。

onmouseover事件

onmouseover 事件会在鼠标指针移动到指定的元素上时发生。

示例：

例如当鼠标移动到 <p> 标签上时，内容改变：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
  <p id="con" onmouseover = "mouseFun()">当鼠标移动到元素上时，内容改变！</p>
</div>
<script>
  function mouseFun(){
    document.getElementById("con").innerHTML = "内容成功改变";
  }
</script>
</body>   
</html>

在浏览器中预览效果：

onmouseout事件

onmouseout 事件和 onmouseover 事件类似，onmouseover 事件是在鼠标移动到元素上时触发事件，而onmouseout 事件会在鼠标指针移出指定的元素时发生。

这两个事件就是一个鼠标放上去就发生，一个要鼠标离开的时候才会发生。

示例：

当鼠标从<p>标签上离开时，元素内容发生改变：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
  <p id="con" onmouseout = "mouseFun()">当鼠标离开元素时，内容改变！</p>
</div>
<script>
  function mouseFun(){
    document.getElementById("con").innerHTML = "内容成功改变";
  }
</script>
</body>   
</html>

这里就不放演示图了，效果和上面的onmouseover事件有点不同，鼠标移开后，内容才会改变。

onkeydown事件

onkeydown 事件会在用户按下一个键盘按键时发生。

示例：

例如当你按下一个键时，页面弹出一个弹出层：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
  <input type="text" onkeydown="keyFun()">
</div>
<script>
  function keyFun(){
    alert("按下一个键，弹出一个弹出层");
  }
</script>
</body>   
</html>

例如我们在浏览器中打开这个 HTML 页面，然后在输入框中按下一个回车键，会弹出一个弹出层：

链接：https://www.9xkd.com/

weixin_39770165

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
a标签点击事件_JavaScript 中常见HTML事件

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

扫一扫