某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如： 按钮 文本输入框…
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件
1. 点击事件
onclick：单击事件ondblclick：双击事件
代码：
<body>
<img id="light" src="img/off.gif" onclick="fun()">
<script>
function fun() {
alert('我TM被点了');
}
</script>
</body>
2. 焦点事件
onblur：失去焦点onfocus：元素获得焦点。
3. 加载事件
onload：一张页面或一幅图像完成加载。
4. 鼠标事件
-
onmousedown：鼠标按钮被按下。 -
onmouseup：鼠标按键被松开。 -
onmousemove：鼠标被移动。 -
onmouseover：鼠标移到某元素之上。 -
onmouseout：鼠标从某元素移开。【左：0、中：1、右：2】
5. 键盘事件
-
onkeydown：某个键盘按键被按下。 -
onkeyup：某个键盘按键被松开。 -
onkeypress：某个键盘按键被按下并松开。【回车键：keyCode:13】
6. 选择和改变
onchange：域的内容被改变。onselect：文本被选中。
7.表单事件
onsubmit：确认按钮被点击。onreset：重置按钮被点击。
8. 控制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式</title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div
</div>
<div id="div2">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
// 设置样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.backgroundColor = "red";
;
// font-size ---> fontSize
div1.style.fontSize = "50px";
}
var div2 = document.getElementById("div2");
div2.onclick = function () {
// 设置样式方式2
div2.className = "d1";
}
</script>
</body>
</html>
9. 如何绑定事件
第一种
直接在html标签上，指定事件的属性(操作)，属性值就是js代码
- 事件：onclick— 单击事件
<body>
<img id="light" src="img/off.gif" onclick="fun()">
<script>
function fun() {
alert('我TM被点了');
}
</script>
</body>
第二种
- 通过js获取元素对象，指定事件属性，设置一个函数
耦合性较小，便于独立开发。
<body>
<img id="light2" src="img/off.gif">
<script>
function fun2() {
alert('呗点我！');
}
// 1.获取light2对象
var light2 = document.getElementById("light2");
// 2.绑定事件
light2.onclick = fun2;
</script>
</body>
案例一：电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script >
var light = document.getElementById("light");
var flag = false;
light.onclick = function() {
if(flag) {
light.src = "img/off.gif";
flag = false;
} else {
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
