HTML事件

JavaScript 中常见HTML事件免费看

onclick事件、onchange事件、onload事件、onmouseover事件等等

2020-06-13侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 13     0     568

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 可以获取 idcon 的对象的内嵌内容。如果使用的是赋值号 =,可以向指定对象插入内容。

// 这样写可以输出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 的值,赋给 idcon 的对象:

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 页面,然后在输入框中按下一个回车键,会弹出一个弹出层:

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

13

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?