事件简单学习
✔ 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
造句： xxx被xxx,我就xxx
我方水晶被摧毁后，我就责备队友。
敌方水晶被摧毁后，我就夸奖自己。
✔ 如何绑定事件
（1）直接在html标签上，指定事件的属性(操作)，属性值就是js代码
事件：onclick--- 单击事件
（2）通过js获取元素对象，指定事件属性，设置一个函数
✔ 案例：
<!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>
事件监听机制
✔ 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。如： 按钮 文本输入框...
* 监听器：代码
* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码
✔ 常见的事件：
（1）点击事件
onclick：单击事件
ondblclick：双击事件
（2）焦点事件
onblur：失去焦点 --- 一般用于表单校验
onfocus：元素获得焦点
（3）加载事件
onload：一张页面或一幅图像完成加载
（4）鼠标事件
onmousedown：鼠标按钮被按下
* 定义方法时，定义一个形参，接收 event 对象
* event 对象的 button 属性可以获取鼠标哪个键被点击了
onmouseup：鼠标按键被松开
onmousemove：鼠标被移动
onmouseover：鼠标移到某元素之上
onmouseout：鼠标从某元素移开
（5）键盘事件
onkeydown：某个键盘按键被按下
onkeyup：某个键盘按键被松开
onkeypress：某个键盘按键被按下并松开
（6）选择和改变
onchange：域的内容被改变
onselect：文本被选中
（7）表单事件
onsubmit：确认按钮被点击
* 可以阻止表单的提交
* 方法返回 false 则表单被阻止提交
onreset：重置按钮被点击
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常见事件</title> <script> //加载完成事件 onload window.onload = function(){ /*// 失去焦点事件 document.getElementById("username").onblur = function(){ alert("失去焦点了..."); }*/ /*// 绑定鼠标移动到元素之上事件 document.getElementById("username").onmouseover = function(){ alert("鼠标来了...."); }*/ /* // 绑定鼠标点击事件 document.getElementById("username").onmousedown = function(event){ // alert("鼠标点击了...."); alert(event.button); }*/ /* document.getElementById("username").onkeydown = function(event){ // alert("鼠标点击了...."); // alert(event.button); if(event.keyCode == 13){ alert("提交表单"); } }*/ /* document.getElementById("username").onchange = function(event){ alert("改变了...") } document.getElementById("city").onchange = function(event){ alert("改变了...") }*/ /*document.getElementById("form").onsubmit = function(){ //校验用户名格式是否正确 var flag = false; return flag; }*/ } function checkForm(){ return true; } </script> </head> <body> <!-- function fun(){ return checkForm(); } --> <form action="#" id="form" onclick="return checkForm();"> <input name="username" id="username"> <select id="city"> <option>--请选择--</option> <option>北京</option> <option>上海</option> <option>西安</option> </select> <input type="submit" value="提交"> </form> </body> </html>
