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 页面，然后在输入框中按下一个回车键，会弹出一个弹出层：
网友评论