JQuery事件对象的属性和方法

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

注释:

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 <script type="text/javascript" src="js/jquery-2.1.1.js"></script>

         <script type="text/javascript">

             $(function() {

                 $("a").click(function(event) {

                     alert(event.type);  //获取事件类型（此处弹出 click）

                     alert(event.target.href);       //获取触发事件的元素的 href 属性值

                     alert("当前鼠标坐标：" + event.pageX + ", " + event.pageY);    //获取鼠标当前坐标

                     event.preventDefault();     //阻止链接跳转

                 });

             });

         </script>

     </head>  

     <!-- HTML -->

     <body>

         <a href="http://www.google.com/">Google</a>

     </body>

 </html>

运行结果:

第一次弹出:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAZCAIAAAAT9IEtAAAAq0lEQVRIie3V0Q3DIAwE0JvZ63gTz+EpvITzQYXSlBAdKk0VcZ9cJD9BEMh/De4GnGbJ+CwZn4fKIkJExtrLfEF2JrhfNtZehpaJCAAAdbf2gs/2NQZQ1YkyVd0POMiabeGaGTWIlgFv3x9kzXaMxckioiNrtuVk2XP8hazupbtPlGWmiHT+s2abme4OICImynJ3+1S1czdrW9bNjMU99HWamiXjs2R8lozPBqCfUnZunrRwAAAAAElFTkSuQmCC" alt="" />

第二次弹出:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAAAgCAIAAAAKfap+AAACU0lEQVR4nO2Z25XDIAwFqZl26IQ6qIImyIfO6mglwJsQI9t758sGE0CMeTihAeBH8G4A+NfAP+AJ/AOewD/gCfwDnsA/4An8A57AP+AJ/AOewD/gCfwDnrj5V2uNMZ704zHGWuvo9nacGqsRe4J2Of/W1VG/7DJ432V/F7bV+ED/SikppdHtHdnv37agOfuXUgohhBBIshhj+CHGqG67RVprKSU5PCmlUoq9lTFNKcnrnPNKru1dEFA7a60qZZRoi0v/OCaj15IfoCK2CkrJOVMidc2GVMbwPDz9o8631kopMr6j+U8WyTlzEeVfCL86xbdqFFWNK7mqazFGllK+Wt3OdhNVca6ddZfPS+S7MaqC/aPE7iioGJ7HJdZfNboT/5Rnduzniy/LxLNaE7FeyZX9kol2AjtMnBS3Wap21Z7DervXO3csT/Mv5ywXRHVLywrZQ1Emn9ZzGTUzUSNVIs1Jf0mUxsiVtLsEK3dtY6iKQ/9U0E7lrv7ZWB8Wb62RQJxISw/HeiW32692NKu9O1POl0Ubk8Mqutc7P1ddzr/R6UE9lnOWMxPvbOZfXihFbRyV35/lyj0o76ho+N/d/9nidv9H17ZqOp/JLnf3fxP/bNBO5XL+8Sqjjm9qAVIHXt64yAmpOz/J3T3tvr+SKyWgLGqkPP1w42UQbKItrtYHFQF1/OIHSERbxdy/btDO407/vx2+mpO504XFuWTzVERsDtqj/Bt9edkMf077rAGLxRfZXOmd/APPA/4BT+Af8AT+AU/gH/AE/gFP4B/wBP4BT16g+G76jQ35owAAAABJRU5ErkJggg==" alt="" />

第三次弹出:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL8AAAAdCAIAAAB0XCq0AAAB0klEQVR4nO2X0ZHDIAxEVTPt0Al1UAVNcB+ZYQgSQuhymMvs+8gQLK/laLOJqQLghZ5uAPxj4B7gB+4BfuAe4AfuAX7gHuAH7gF+4B7gB+4BfuAe4AfuAX7gHuDnCvcQaW30R3kldfC3+iVm11X62dL5eh677ZknlPG0Q8t6vs+9xU3G9UWzLnWWKGft6rR1Smnop5Ril/Lx5JdGn5Y4If65DzvLgo/0Y7w7sbKUklJ6rVNKIYTXOsZoF9eLSylbLnRzReTSe7Q4zl3uW8R199h1WuWymI/ZnT09McZm0D/lGfdYQqVOgqSaI2qomRVzZf5q19miz56+DSNi8bHgqZdkT88wLXEh1oj17S33k3LRWfFSZxciyjnPOrGczjePBU+93z3G7BnWfMBcQZmTeMiho0NEfMy/dM/J4KnPPnPN6GvExcwc4kRnU+c6ej9GnUFQuf0hdYY7tcCLTwZP/e7sWXqozgevt2fRUdwzsw7XiTEOf4yU4sPBU+93D98UaywJZFFWNh06IjnnIdteTmoP4dT9os18JhaHEE4GT73/mau+D0ys4dnTnz6sucKyH7vOZymlKMFzA9dlD2iklA5nyS5wD/AD9wA/cA/wA/cAPz+8fnGVmdgj7gAAAABJRU5ErkJggg==" alt="" />

第四次弹出:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAA/CAIAAAC3jNulAAABtUlEQVR4nO2Y3Y2EIBSFb7UWQCMWQA02wLsd8GQJJFMD+2BkAXHV8cwo7PliJkr8GT8OXlQ8gSJ3/4HWoFAwiVCR7lG/NfLchFbqtJBQcgUmFMxmQq3uRMLSG4e+shvVJ057N8WETlo6UePvzdpBpNMWeuU9oe0k1OrUpvfee2f6deMl/k1CJ70fxpdRy9NAT6falRn17DERGh24dFsrCbWDyPCnz5dRwddb67nQeIfy+KiIVUIzoW5UWWnKdgibW+3Z0A6byUrchdMc4dYTGu7fDkmCjrSXfKU7dNkCLoBf5PAz9LNCC13YSkLnp1hSUrz32f1HQzgZ8qX2Q0O+nXJ/Yh66tJwtRHEPbRelcLmlY9pJ6Iwz/fab0vvTJm2KwYwOrDytX3+XPzzAW0soDDeqqMrVPs3cJU/oegZz43KLkYvwiz2Y534PrRQKBUOhYCgUDIWCoVAwFAqGQsFQKBgKBUOhYCgUDIWCoVAwFAqGQsFQKBgKBUOhYCgUDIWCoVAwFAqGQsFQKBgKBUOhYCgUDIWCoVAwFAqGQsFQKBgKBUOhYCgUDIWCoVAwFAqGQsFQKJgfQVP2PIAAw74AAAAASUVORK5CYII=" alt="" />

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 <script type="text/javascript" src="js/jquery-2.1.1.js"></script>

         <script type="text/javascript">

             $(function() {

                 //为 <span> 元素绑定 click 事件

                 $("span").click(function() {

                     $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");

                 });

                 //为 Id 为 content 的 <div> 元素绑定 click 事件

                 $("#content").click(function(event) {

                     $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");

                     event.stopPropagation();    //阻止事件冒泡

                 });

                 //为 <body> 元素绑定 click 事件

                 $("body").click(function() {

                     $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");

                 });

             });

         </script>       

         <!-- CSS -->

         <style type="text/css">

             #content {

                 background: green;

             }

         </style>

     </head>  

     <!-- HTML -->

     <body>

         <div id="content">  外层div元素<br />

             <span style="background: pink;">内层span元素</span>

             <br />

        外层div元素

        </div>

        <br />

         <div id="msg"></div>

     </body>

 </html>

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

内层span元素被单击

外层div元素被单击

body元素被单击

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

内层span元素被单击

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("input").keydown(function(event){

     $("div").html("Key: " + event.which);

   });

 });

 </script>

 </head>

 <body>

 请随意键入一些字符：<input type="text" />

 <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>

 <div />

 </body>

 </html>

运行结果如下:

aaarticlea/png;base64,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" alt="" />

巴特西

JQuery事件对象的属性和方法

最新文章

热门文章