JQuery笔记11：JQuery 事件
常用事件：
如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数： e ， e 就是事件对象。通过e就可以拿到事件相关的信息。
调用事件对象的 stopPropagation() 方法终止冒泡。 e. stopPropagation();
3： which：判断鼠标是那个键按下的， 如果是鼠标事件获得按键（ 1 左键， 2 中键， 3 右键）。 altKey 、 shiftKey 、 ctrlKey 获得 alt 、 shift 、 ctrl 是否按下，为 bool 值。 keyCode 、 charCode 属性发生事件时的keyCode （键盘码，小键盘的 1 和主键盘的 keyCode 不一样）、charCode （ ASC 码）。
<2>：移除事件绑定： bind() 方法即可移除元素上所有绑定的事件，如果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ； unbind:-=
<3>：一次性事件：如果绑定的事件只想执行一次随后立即 unbind 可以使用 one() 方法进行事件绑定：
（1）：JQuery 中的事件绑定： $("#btn").bind("click",function(){}) ，这是click内部做的工作，每次都这么调用太麻烦，平时不这么用，所以 jQuery 可以用 $("#btn").click(function(){}) 来进行简化。
（2）：合成事件 ：hover ()函数。【知道就行，这种方法可读性不好，自己写的时候不用这样变态】
语法： hover(enterfn,leavefn) ，当鼠标放在元素上时调用enterfn 方法，当鼠标离开元素的时候调用 leavefn 方法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/* $("p").mouseenter(function(){$(this).text("您来啦！");});
$("p").mouseleave(function(){$(this).text("您慢走！");});*/
$("p").hover(function(){$(this).text("您来啦！");},function(){$(this).text("您慢走！");});
});
</script>
</head>
<body>
<p>店小二：</p>
</body>
</html>
（3）：事件冒泡： JQuery 中也像 JavaScript 一样是事件冒泡
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tb").click(function () { alert("tb被点击了"); });
$("#td").click(function () { alert("td被点击了"); });
$("#tr").click(function () { alert("tr被点击了"); });
$("#p").click(function () { alert("p被点击了"); });
});
</script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>
如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数： e ， e 就是事件对象。通过e就可以拿到事件相关的信息。
调用事件对象的 stopPropagation() 方法终止冒泡。 e. stopPropagation();
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tb").click(function () { alert("tb被点击了"); });
$("#td").click(function (e) { alert("td被点击了"); e.stopPropagation(); });//往上不再冒泡，泡泡到此处被捅破了
$("#tr").click(function () { alert("tr被点击了"); });
$("#p").click(function () { alert("p被点击了"); });
});
</script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>
（4）： 阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault() 方法和 window.event.returnValue=false 效果一样。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("a").click(function (e) { alert("百度被攻击了，打不开！"); e.preventDefault(); });
});
</script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
其他不常用事件：
<1>：e的其他属性：
1：pageX 、 pageY
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#td").click(function (e) { alert(e.pageX+":"+e.pageY); });
});
</script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>
2：target 指的是最原始的冒泡开始的触发事件的元素，冒泡的起始，对应于Dom中的srcElement
和this区别：this指的是当前监听的是谁，这个this就是谁。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tr").click(function (e) { alert("下面是tr的：");alert($(this).html()); alert($(e.target).html()); });
$("#p").click(function (e) { alert("下面是p的："); alert($(this).html()); alert($(e.target).html()); });
});
</script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>
3： which：判断鼠标是那个键按下的， 如果是鼠标事件获得按键（ 1 左键， 2 中键， 3 右键）。 altKey 、 shiftKey 、 ctrlKey 获得 alt 、 shift 、 ctrl 是否按下，为 bool 值。 keyCode 、 charCode 属性发生事件时的keyCode （键盘码，小键盘的 1 和主键盘的 keyCode 不一样）、charCode （ ASC 码）。
<2>：移除事件绑定： bind() 方法即可移除元素上所有绑定的事件，如果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ； unbind:-=
<3>：一次性事件：如果绑定的事件只想执行一次随后立即 unbind 可以使用 one() 方法进行事件绑定：