HTML 事件就是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为。我们可以使用 JavaScript 触发这个事件。
下面是常用的HTML事件：
-
onclick
-
onchange
-
onload
-
onmouseover
-
onmouseout
-
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/