码迷,mamicode.com
首页 > Web开发 > 详细

JQuery事件对象的属性和方法

时间:2014-08-07 18:27:50      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   os   io   

这是今天的总结,以后学习自己可以当参考书来读读.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>  

运行结果:

第一次弹出:

bubuko.com,布布扣

第二次弹出:

bubuko.com,布布扣

第三次弹出:

bubuko.com,布布扣

第四次弹出:

bubuko.com,布布扣

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>

运行结果如下:

bubuko.com,布布扣

JQuery事件对象的属性和方法,布布扣,bubuko.com

JQuery事件对象的属性和方法

标签:style   blog   http   color   java   使用   os   io   

原文地址:http://www.cnblogs.com/liubeimeng/p/3897430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!