首页 > 代码库 > JQuery事件对象的属性和方法

JQuery事件对象的属性和方法

2024-07-16 07:38:57   220人阅读

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

运行结果如下:


联系
我们