什么是事件：
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见的DOM事件：
鼠标事件：click()
当鼠标单击发生click事件 ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").click(); }); }); </script> </head> <body> <button>触发 p 元素上的 click 事件</button> <p onclick="alert('Click 事件被触发')">这是一个段落。</p> </body> </html>
鼠标事件dblclick()
当双击元素时，触发 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。
提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双击</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").dblclick(function(){ alert("这个段落被双击。"); }); }); </script> </head> <body> <p>双击这个段落。</p> </body> </html>
鼠标事件mouseenter
当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。
注意：与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。参见页面底部演示实例。
提示：该事件通常与 mouseleave 事件一起使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").mouseenter(function(){ $("p").css("background-color","yellow"); }); $("p").mouseleave(function(){ $("p").css("background-color","lightgray"); }); }); </script> </head> <body> <p>鼠标移动到该段落。</p> </body> </html>
键盘事件-keydown
与 keydown 事件相关的事件顺序：
- keydown - 键按下的过程
- keypress - 键被按下
- keyup - 键被松开
当键盘键被按下时发生 keydown 事件。
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。
提示：请使用 event.which 属性来返回哪个键盘键被按下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>键盘按下事件</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color","yellow"); }); $("input").keyup(function(){ $("input").css("background-color","pink"); }); }); </script> </head> <body> 输入你的名字: <input type="text"> <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p> </body> </html>
表单事件submit
定义和用法
当提交表单时，会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>submit事件</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("form").submit(function(){ alert("提交"); }); }); </script> </head> <body> <form action=""> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="提交"> </form> </body> </html>