目录
事件绑定
常见事件
案例
原始代码
完整代码
最终效果
事件绑定
事件绑定是将特定的事件（如点击、鼠标移动、键盘按键按下等）与相应的处理函数关联起来的过程。当指定的事件在对应的元素上发生时，与之绑定的处理函数就会被调用执行，以实现相应的功能或操作。
- 方式一：通过HTML标签中的事件属性进行绑定
<body><input type="button" value="按钮1" onclick="on()">
</body>
<script>function on(){alert("我被点击了！");}
</script>- 方式二：通过DOM元素属性绑定
<body><input type="button" value="按钮1" onclick="on()" id="btn">
</body>
<script>document.querySelector("#btn").onclick = function(){alert("我被点击了！");}
</script>常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件-常见事件</title>
</head>
<body><input type="text" onmouseover="over()" onmouseout="out()">
</body>
<script>function over(){console.log("鼠标移进来了");}function out(){console.log("鼠标移出去了");}
</script>
</html>
案例
通过事件监听及DOM操作，完成如下效果实现。
- 点击“点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡。
- 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
- 点击“全选”按钮使所有的复选框呈现被选中的状态，点击“反选”按钮使所有的复选框呈现相反勾选的状态。
原始代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" > <input type="button" value="熄灭" ><br> <br><input type="text" id="name" value="SKY" ><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" > <input type="button" value="反选" ></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick</script>
</html>完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button" value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="SKY" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}// 点击 "反选" 按钮使所有的复选框呈现相反勾选的状态 function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 反选状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = (element.checked) ? false : true;}}</script>
</html>最终效果
END
学习自：黑马程序员——JavaWeb课程