<!--
事件
JQuery中事件绑定原本应该是$("object").bind("event",function(){})
$("object").click(function(){})为简化的写法
合成事件 hover(enterfn,leavefn),把mouseenter/mouseleave合一起、
事件冒泡 冒泡原理与JavaScript一样、可使用事件对象的stopPropagation()方法终止冒泡
阻止默认行为 如超链接点击后会转向新链接、如果想阻止默认行为调用事件对象的preventDefault()方法
事件属性
pageX:触发事件时鼠标X坐标
pageY:触发事件时鼠标6坐标
**target:获得触发事件的源对象 与 this 不同，this指当前的元素、target指气泡来源、在事件冒泡中target永远是触发源
which:获得鼠标按键，1左键 2中间 3右键
altKey,shiftKey,ctrlKey:发送事件时alt,shift,ctrl是否按下
keyCode,charCode:发送事件时的keyCode,charCode
移除事件绑定:unbind()方法可以移除元素上的所有绑定事件、如果要移除指定事件绑定采用$("object").unbind("event")
一次性时间:若绑定的事件只需要触发一次、以后不再触发可以使用one方法进行事件绑定
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 () {
//hover测试,感觉hover用途不大、我喜欢enter/leave分开写
$("#hover").hover(
function () {
$(this).text("进入");
},
function () {
$(this).text("离开");
});
//阻止继续冒泡
$("#stop").click(function (e) {
e.stopPropagation();
});
//事件属性
$("#test").mousemove(function (e) { //div
var tips = "information:";
tips += "<br />pageX:" + e.pageX;
tips += "<br />pageY:" + e.pageY;
$(this).html(tips);
});
});
</script>
</head>
<body>
hover:
<p style="background-color:Red" id="hover">hover测试</p>
事件冒泡:
<table onclick="alert('table');">
<tr onclick="alert('tr');">
<td onclick="alert('td');">冒泡测试</td>
</tr>
</table>
<br />
阻止冒泡:
<table onclick="alert('table');">
<tr id="stop" onclick="alert('tr');"><!--这里就停止冒泡、上层元素不会触发click-->
<td onclick="alert('td');">阻止测试</td>
</tr>
</table>
<hr />
事件属性：
<div id="test" style="600px; height:400px; background-color:Gray"></div>
</body>
</html>