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>
在浏览器中预览效果:
![ff4d989acfb01cf907dd2f88c8124eac.png](https://i-blog.csdnimg.cn/blog_migrate/38243193d16b1b82d724a82fa34646cc.png)
那上述 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>
在浏览器中预览效果:
![219d8d2450805549ebadbbc582592e54.png](https://i-blog.csdnimg.cn/blog_migrate/29e84a16512c99c3f133db6898f34296.png)
在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>
在浏览器中预览效果:
![465864a69524c8b295b61997c7d89075.png](https://i-blog.csdnimg.cn/blog_migrate/ef1f12ba2062448d14edb624b80b2dc5.png)
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 页面,然后在输入框中按下一个回车键,会弹出一个弹出层:
![bb07572334a5778ba4c69bfac6556ab6.png](https://i-blog.csdnimg.cn/blog_migrate/ac8ce30c312bcb5bf4f56beed5188837.png)
链接:https://www.9xkd.com/