事件简单学习
事件简单学习：
功能：某些组件被执行了默写操作后，触发默写代码的行为。
造句： xxx被xxx，我就xxx
我方水晶被摧毁后，我就输了
敌方方水晶被摧毁后，我就赢了
如何绑定事件
1.直接在html标签上，指定事件的属性，属性就是js代码
1.事件：onclick - - - 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<img id="ligth1" src="img/off.gif" onclick="fun()">
<img id="ligth2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我被包夜了');
}
function fun2(){
alert('咋老点我？')
}
//1.获取ligth2对象
var ligth2 = document.getElementById('ligth2');
//2.绑定事件
ligth2.onclick = fun2;
</script>
</body>
</html>
案例1_电灯开关
案例分析
/*
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例1 电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
//1.获取图片对象
var light = document.getElementById("light");
var flag = false; //代表灭灯的 off图片
//2.绑定点击事件
light.onclick = function (){
if (flag){ //判断如果灯是开着的，则灭掉
light.src = "img/off.gif";
flag = false;
}else {
//如果灯是灭的，则打开
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
案例图
点击前：
点击后：
标签：off,案例,light,绑定,flag,开关,电灯,事件,图片 From： https://www.cnblogs.com/x3449/p/16905745.html