<!--

事件

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="width:600px; height:400px; background-color:Gray"></div>
</body>
</html>