[JS-DOM]事件监听机制

事件监听机制

	概念:某些组件被执行了某些操作后，触发某些代码的指行。*事件: 某些操作。如:单击，双击，键盘按下了，鼠标移动了。*事件源:组件。如:按钮，文本输入框...*监听器:代码。*注册监听:将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发指向某个监听器代码。

常见的事件：

        1. 点击事件：1. onclick：单击事件2. ondblclick：双击事件2. 焦点事件1. onblur：失去焦点。* 一般用于表单验证2. onfocus:元素获得焦点。3. 加载事件：1. onload：一张页面或一幅图像完成加载。4. 鼠标事件：1. onmousedown	鼠标按钮被按下。* 定义方法时，定义一个形参，接受event对象。* event对象的button属性可以获取鼠标按钮键被点击了。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	重置按钮被点击。

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常见事件</title><script>/*常见的事件：1. 点击事件：1. onclick：单击事件2. ondblclick：双击事件2. 焦点事件1. onblur：失去焦点。* 一般用于表单验证2. onfocus:元素获得焦点。3. 加载事件：1. onload：一张页面或一幅图像完成加载。4. 鼠标事件：1. onmousedown	鼠标按钮被按下。* 定义方法时，定义一个形参，接受event对象。* event对象的button属性可以获取鼠标按钮键被点击了。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.加载完成事件  onloadwindow.onload = function(){/*//1.失去焦点事件document.getElementById("username").onblur = function(){alert("失去焦点了...");}*//*//3.绑定鼠标移动到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠标来了....");}*//* //3.绑定鼠标点击事件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>