JQuery事件对象的属性和方法

浏览数：37 / 时间：2015年06月09日

这是今天的总结,以后学习自己可以当参考书来读读.Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

注释:

1、event.type：获取事件的类型
2、event.target：获取触发事件的元素
3、event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
4、event.preventDefault() 方法：阻止默认行为

 1 <!doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title></title> 
 6 <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
 7         <script type="text/javascript">  
 8             $(function() {  
 9                 $("a").click(function(event) {  
10                     alert(event.type);  //获取事件类型（此处弹出 click）  
11                     alert(event.target.href);       //获取触发事件的元素的 href 属性值  
12                     alert("当前鼠标坐标：" + event.pageX + ", " + event.pageY);    //获取鼠标当前坐标  
13                     event.preventDefault();     //阻止链接跳转  
14                 });  
15             });   
16         </script>       
17     </head>  
18     
19     <!-- HTML -->  
20     <body>  
21         <a href="http://www.google.com/">Google</a>  
22     </body>  
23 </html>

运行结果:

第一次弹出:

第二次弹出:

第三次弹出:

第四次弹出:

event.stopPropagation() 方法：防止事件冒泡

 1 <!doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title></title> 
 6 <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
 7         <script type="text/javascript">  
 8             $(function() {  
 9                 //为 <span> 元素绑定 click 事件  
10                 $("span").click(function() {  
11                     $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");  
12                 });  
13                 //为 Id 为 content 的 <div> 元素绑定 click 事件  
14                 $("#content").click(function(event) {  
15                     $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");  
16                     event.stopPropagation();    //阻止事件冒泡  
17                 });  
18                 //为 <body> 元素绑定 click 事件  
19                 $("body").click(function() {  
20                     $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");  
21                 });  
22             });  
23         </script>       
24           
25         <!-- CSS -->  
26         <style type="text/css">  
27             #content {  
28                 background: green;  
29             }         
30         </style>  
31     </head>  
32     
33     <!-- HTML -->  
34     <body>  
35         <div id="content">  外层div元素<br />  
36             <span style="background: pink;">内层span元素</span>
37             <br />
38        外层div元素
39        </div>
40        <br />  
41         <div id="msg"></div>  
42     </body>  
43 </html>

说明:如果没有event.stopPropagation(); 语句运行结果将是单击"内层span元素 ",出现

内层span元素被单击

外层div元素被单击

body元素被单击

加上event.stopPropagation(); 语句运行结果将是单击"内层span元素 ",出现

内层span元素被单击

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("input").keydown(function(event){ 
 7     $("div").html("Key: " + event.which);
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 
14 请随意键入一些字符：<input type="text" />
15 <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
16 <div />
17 
18 </body>
19 </html>