概念
概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如： 按钮 文本输入框...
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件
点击事件
- onclick：单击事件
- ondblclick：双击事件
焦点事件
- onblur：失去焦点
- onfocus:元素获得焦点。
加载事件
- onload：一张页面或一幅图像完成加载。
鼠标事件
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
键盘事件
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
表单事件
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
事件简单学习
功能： 某些组件被执行了某些操作后，触发某些代码的执行。
造句： xxx被xxx,我就xxx 我方水晶被摧毁后，我就责备对友。 敌方水晶被摧毁后，我就夸奖自己。
如何绑定事件
- 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
- 事件：onclick--- 单击事件
- 通过js获取元素对象，指定事件属性，设置一个函数
代码：
<body>
<img id=light src=img/off.gif onclick=fun();>
<img id=light2 src=img/off.gif>
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我？');
}
//1.获取light2对象
var light2 = document.getElementById(light2);
//2.绑定事件
light2.onclick = fun2;
</script>
</body>
案例1：电灯开关
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>电灯开关</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>
效果如下：
本文内容到此结束了， 如有收获欢迎点赞👍收藏💖关注✔️，您的鼓励是我最大的动力。 如有错误❌疑问💬欢迎各位大佬指出。 主页：共饮一杯无的博客汇总👨💻
保持热爱，奔赴下一场山海。🏃🏃🏃