【JavaScript高级程序设计】19、事件类型（1）

鼠标点击时候按键事件

当我们在网页上点击鼠标的时候，按下ctrl，shift，win，alt键的时候都是可以用JavaScript来进行监控的

<!DOCTYPE html>
<html>
<head>
    <title>Client coordinates Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <div id="myDiv" style="background-color:green;height:10000px;width:10000px">Click me</div>
    <script>
        var div = document.getElementById("myDiv");
        //给div元素添加监听事件
        EventUtil.addHandler(div, "click", function(event)
        {
            //这里判断，在我们执行点击事件的时候，键盘是否按下ctrl，shift，alt，或者meta（window下为win键，Mac下是cmd键
            event = EventUtil.getEvent(event);
            var keys = new Array();

            if(event.shiftKey)
            {
                keys.push("shift");
            }

            if(event.ctrlKey)
            {
                keys.push("ctrl");
            }

            if(event.altKey)
            {
                keys.push("alt");
            }

            if(event.metaKey)
            {
                keys.push("meta");
            }

            alert("Keys:" + keys.join(","));
        });

    </script>
</body>
</html>

效果：

 

 鼠标离开或者进入时相关元素

<!doctype html>
<<html>
<head>
    <title>相关元素</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <div id="myDiv" style="background-color:red;height:100px;width:100px">移动到这里</div>
    <script type="text/javascript">

        //这里为鼠标进入div然后离开div的时间进行判断
        var myDiv = document.getElementById("myDiv");

        //这个mouseover是鼠标光标进入当前元素的事件，相关对象就是离开的那个元素对象
        EventUtil.addHandler(myDiv, "mouseover", function(event)
                                                 {
                                                     event = EventUtil.getEvent(event);
                                                     //这个获取的就是相关事件，那么我们给dive添加了这个事件
                                                     //那个获取到的就是鼠标进入div的时候触发，那么相关事件就是body事件
                                                     var target = EventUtil.getRelatedTarget(event);
                                                     alert("相关元素是：" + target);
                                                 }
                            );

    </script>

</body>
</html>

显示结果：

 

posted @ 2016-08-06 00:54  cutter_point  阅读(167)  评论(0)    收藏  举报