事件简单学习
✔ 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
造句： 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>
