事件_概述和事件_常见事件演示
事件监听机制：
-
概念：某些组件被执行了某些操作后，出发某些代码的执行。
- 事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如：按钮 文本输入框...
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
-
常见的事件：
- 点击事件：
- onclick：单击事件
- ondblclick：双击事件
- 焦点事件：
- onblur：失去焦点
- onfocus：元素获取焦点。
- 加载事件：
- onload：一张页面或一幅图像完成加载
- 鼠标事件：
- onmousedown：鼠标按钮被按下。
- onmouseup：鼠标按键被松开
- onmousemove：鼠标被移动
- onmouseout：鼠标从某元素移开
- onmouseover：鼠标移到某元素上
- 键盘事件：
- onkeydown：某个键盘按键被按下
- onkeyup：某个键盘按键被松开
- onkeypress：某个键盘按键被按下并松开
- 选择和改变
- onchange：域的内容被改变
- onselect：文本被选中
- 表单事件：
- onsubmit：确认按钮被点击
- onreset：充值按钮被点击
- 点击事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//加载完成事件
window.onload = function (){
//失去焦点事件
/*document.getElementById("username").onblur = function () {
alert("失去焦点了");
};
//绑定鼠标移动道元素之上事件
document.getElementById("username").onmouseover = function () {
alert("鼠标来了");
};*/
/*//绑定鼠标点击事件
document.getElementById("username").onmousedown = function () {
alert("鼠标点击了");
};*/
/*document.getElementById("username").onkeydown = function () {
alert("点");
};*/
/*document.getElementById("city").onchange = function () {
alert("改变了");
};*/
document.getElementById("form").onsubmit = function () {
//检验用户名格式是否正确
var flag = false;
return flag;
};
};
</script>
</head>
<body>
<form action="#" id="form">
<input id="username" name="username">
<select id="city">
<option>---请选择---</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
