事件监听机制
本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理,并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。
1.基本概念
* 概念:某些组件被执行了某些操作后,触发某些代码的执行。
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框...
* 监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
* 常见的事件:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点 (光标)
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
定义方法时,定义一个形参,接受event对象。
event对象的button属性可以获取鼠标按钮键被点击了。
左键是0,点滑轮是1,点右键是2
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false则表单被阻止提交。
2. onreset 重置按钮被点击。
<!--失去焦点,当鼠标从当前文本框移开,光标不在当前文本框显示时,触发事件,可用于当用户输入完用户名,检测用户名是否可用-->
2.绑定事件
* 如何绑定事件
1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
<img id="light" src="1.png" οnclick="fun();">
2. 通过js获取元素对象,指定事件属性,设置一个函数
<img id="light2" src="img/off.gif">
<script>
function fun2(){
alert('---');
}
var light2 = document.getElementById("light2");//1.获取light2对象
light2.onclick = fun2;//2.绑定事件
</script>
3.事件演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script>
//2.加载完成事件 onload
window.onload = function(){
//1.失去焦点事件
document.getElementById("username").onblur = function(){
alert("失去焦点了...");
}
//3.绑定鼠标移动到元素之上事件
document.getElementById("username").onmouseover = function(){
//alert("鼠标来了....");
}
//4.绑定鼠标点击事件
document.getElementById("username").onmousedown = function(event){
// alert("鼠标点击了....");
if(event.button==1){
alert("鼠标滑轮被点击了..")
}
}
//5.绑定键盘输入事件
//键盘每输入一个字符,都会通过keyCode获取一个值(与ASCII类似)
document.getElementById("username").onkeydown = function(event){
// alert("鼠标点击了....");
// alert(event.button);
//Enter键的keyCode是13.模拟按下Enter提交数据
if(event.keyCode == 13){
alert("提交表单");
}
}
//6,绑定下拉列表的改变事件
document.getElementById("city").onchange = function(event){
alert("改变了...")
}
//7.绑定表单提交事件
document.getElementById("form").onsubmit = function(){
//校验用户名格式是否正确
var flag = false;
return flag;
}
}
</script>
</head>
<body>
<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>