方法一：直接在 HTML 标签上，指定事件的属性，属性值就是 JavaScript 代码
<img src="" alt="资源正在加载" onclick="confirm('5+5=10对吗？')">
方法二：通过 JavaScript 获取到元素对象，指定事件的属性，设置一个函数
<img src="" alt="资源正在加载" id="light">
<script>
var light = document.getElementById("light");
light.onclick = function (){
alert("点我干嘛");
}
</script>
| 关键字 | 作用 |
|---|---|
| onclick | 单击事件 |
| ondblclick | 双击事件 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击事件</title>
<style>
div{
width: 80px;
height: 80px;
background-color: red;
margin: 20px;
padding: 40px;
}
</style>
</head>
<body>
<div id="div1">
<p>单击变色中国</p>
</div>
<div id="div2">
<p>双击隐藏郑州</p>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.onclick = function (){
div1.style.backgroundColor='orange';
}
div2.ondblclick = function (){
div2.style.visibility='hidden';
}
</script>
</body>
</html>
| 关键字 | 作用 |
|---|---|
| onblur | 失去焦点（一般） |
| onfocus | 元素获得焦点 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<input type="text" id="username" placeholder="请输入姓名">
<input type="button" id="btn" value="点我，让我消失">
<script>
var username = document.getElementById("username");
var btn = document.getElementById("btn");
// 失去焦点时，元素背景颜色变成 橙色
username.onblur = function(){
username.style.backgroundColor = "orange";
}
// 获取焦点时，让按钮消失
btn.onfocus = function(){
btn.style.visibility = "hidden";
}
</script>
</body>
</html>
| 关键字 | 作用 |
|---|---|
| onload | 一张页面或一副图像完成加载 |
示例代码（自己去下载太阳和月亮的图片，替换自己的路径）
<!DOCTYPE html>
<html>
<head>
<title>图片自动变换示例</title>
<script>
// 2秒后，执行此函数，切换照片
setTimeout(function changeImage() {
var image = document.getElementById('myImage');
image.src = '../../img/moon.jpg'; // 替换成月亮的图片
},2000);
</script>
</head>
<body onload="changeImage()">
<img id="myImage" src="../../img/sun.jpg" alt="太阳">
</body>
</html>
| 关键字 | 作用 |
|---|---|
| onmousedown | 鼠标按钮被按下（定义方法时，定义一个形参，接收event对象，event的button属性可以知道那个按钮点击了） |
| onmouseup | 鼠标按键松开 |
| onmousemove | 鼠标被移动 |
| onmouseover | 鼠标移动到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
</head>
<body>
<input type="button" id="btn1" value="点我">
<input type="button" id="btn2" value="点我">
<input type="button" id="btn3" value="移动鼠标看看我的变化">
<input type="button" id="btn4" value="将鼠标移动到我身上试试，移走再试试">
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
// 鼠标按键按下
btn1.onmousedown = function (event){
if(event.button == 0){
btn1.value = "鼠标左键踩到我了";
}else if(event.button == 1){
btn1.value = "鼠标滚轮踩到我了";
}else if(event.button == 2){
btn1.value = "鼠标右键踩到我了";
}
}
// 鼠标按键松开
btn2.onmouseup = function (){
btn2.value = "别松开我啊";
}
// 鼠标移动
btn3.onmousemove = function (){
btn3.value = "鼠标移动了";
btn3.style.backgroundColor = "yellow";
}
// 鼠标移动按钮上
btn4.onmouseover = function (){
btn4.style.backgroundColor = "red";
}
// 鼠标移动开按钮
btn4.onmouseout = function (){
btn4.style.backgroundColor = "";
}
</script>
</body>
</html>
| 关键字 | 作用 |
|---|---|
| onkeydown | 某个键盘按键被按下 |
| onkeyup | 某个键盘按键被松开 |
| onkeypress | 某个键盘按键被按下并松开 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<p id="p1">输出那个按键被按下</p>
<p id="p2">输出那个按键被松开</p>
<p id="p3">那个按键被按下并松开</p>
<input type="text" id="btn1" placeholder="请按下键盘按键">
<input type="text" id="btn2" placeholder="请按下键盘按键">
<input type="text" id="btn3" placeholder="请按下键盘按键">
<script>
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var p3 = document.getElementById("p3");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.onkeydown = function (event){
var key = event.keyCode;
p1.innerHTML = "被按下的按键是："+key + "<br>";
}
btn2.onkeyup = function (event){
var key = event.keyCode;
p2.innerHTML = "被松开的按键是："+key + "<br>";
}
// 显示的是大写字母的 ASCII 码值
btn3.onkeypress = function (event){
var key = event.keyCode;
p3.innerHTML = "按下又松开的按键是："+key + "<br>";
}
</script>
</body>
</html>
| 关键字 | 作用 |
|---|---|
| onchange | 域的内容被改变（可用作下拉列表） |
| onselect | 文本被选中 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择和改变事件</title>
</head>
<body>
<!-- 下拉列表 -->
<select type="select" id="city">
<option value="0">--请选择城市--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">郑州</option>
</select>
<!-- 文本域 -->
<textarea id="myTextarea" style="width: 300px; height: 100px;">
选择一些文本，你好，欢迎来到编程世界！我是小哼，我们一起共同进步。
</textarea>
<script>
var city = document.getElementById("city");
var myTextarea = document.getElementById("myTextarea");
// 下拉列表选中
city.onchange = function (){
// 获取下拉列表选择值
var selectValue = city.value;
// 进行判断
if(selectValue == 1){
alert("北京");
}else if(selectValue == 2){
alert("上海");
}else if(selectValue == 3){
alert("深圳");
}else if(selectValue == 4){
alert("郑州");
}else{
alert("不好意思，其他城市暂未开通");
}
}
// 文本选中
myTextarea.onselect = function (){
// 获取被选择的文本
var selectText = window.getSelection().toString();
alert(selectText);
}
</script>
</body>
</html>
| 关键字 | 作用 |
|---|---|
| onsubmit | 确认按钮被点击（可以阻止表单提交） |
| onreset | 重置按钮被点击 |
示例代码
<!DOCTYPE html>
<html>
<head>
<title>表单事件</title>
<meta charset="utf-8">
<script>
function handleSubmit() {
// 阻止表单的默认提交行为
event.preventDefault();
// 获取表单中的输入值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在控制台输出输入值
alert('Username: ' + username);
alert('Password: ' + password);
}
function handleReset() {
// 重置表单后的操作
alert('输入框已重置');
}
</script>
</head>
<body>
<form onsubmit="handleSubmit()" onreset="handleReset()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>