事件简单学习与案例1_电灯开关
事件简单学习
事件简单学习：
功能：某些组件被执行了默写操作后，触发默写代码的行为。
造句： 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>
案例图
点击前：
点击后：
