标签：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>
运行结果:
第一次弹出:
第二次弹出:
第三次弹出:
第四次弹出:
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>
运行结果如下:
JQuery事件对象的属性和方法,布布扣,bubuko.com
标签：style blog http color java 使用 os io
原文地址：http://www.cnblogs.com/liubeimeng/p/3897430.html
