Event事件----鼠标键盘举例

最新推荐文章于 2024-07-13 17:14:37 发布

weixin_33858249

最新推荐文章于 2024-07-13 17:14:37 发布

阅读量296

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hubcarl/archive/2009/04/03/1428898.html

版权

代码(oEvent.target||oEvent.srcElement).id.逻辑或操作于两个对象时,第一个对象非空返回第一个对象,否则返回第二个对象.

这样可以用它来判断哪个属性保存了事件目标,以便获取id特性.

Code
<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
                oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
                oTextbox.value += "\n    at (" + oEvent.clientX + "," + oEvent.clientY + ") in the client";
                oTextbox.value += "\n    at (" + oEvent.screenX + "," + oEvent.screenY + ") on the screen";
                oTextbox.value += "\n    button down is " + oEvent.button;

                var arrKeys = [];
                if (oEvent.shiftKey) {
                    arrKeys.push("Shift");
                }

                if (oEvent.ctrlKey) {
                    arrKeys.push("Ctrl");
                }

                if (oEvent.altKey) {
                    arrKeys.push("Alt");
                }

                oTextbox.value += "\n    keys down are " + arrKeys;

            }
        </script>
    </head>
    <body>
        <p>Use your mouse to click and double click the red square.</p>
        <div style="width: 100px; height: 100px; background-color: red"
             onmouseover="handleEvent(event)"
             onmouseout="handleEvent(event)"
             onmousedown="handleEvent(event)"
             onmouseup="handleEvent(event)"
             onclick="handleEvent(event)"
             ondblclick="handleEvent(event)" id="div1"></div>
        <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>

在IE中

fromElement属性包含鼠标指针来自的元素 toElement包含鼠标指针去往的元素

Code
//鼠标事件
<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
                oTextbox.value += "\n    target is " + oEvent.srcElement.tagName;

                if (oEvent.fromElement) {
                    oTextbox.value += "\n    fromElement is " + oEvent.fromElement.tagName;
                }

                if (oEvent.toElement) {
                    oTextbox.value += "\n    toElement is " + oEvent.toElement.tagName;
                }


            }
        </script>
    </head>
    <body>
        <p>Use your mouse to click and double click the red square.</p>
        <div style="width: 100px; height: 100px; background-color: red"
             onmouseover="handleEvent(event)"
             onmouseout="handleEvent(event)"
             onmousedown="handleEvent(event)"
             onmouseup="handleEvent(event)"
             onclick="handleEvent(event)"
             ondblclick="handleEvent(event)" id="div1"></div>
        <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>

在DOM 中 DOM 对mouseover和mouseout只支持一个event属性relatedTarget.在mouseover事件中,relatedTarget

指出鼠标指针来自何处,在mouseout事件中,relatedTarget指出鼠标指针去往何方.

//键盘事件

Code
<html>
    <head>
        <title>Key Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
                oTextbox.value += "\n    target is " + (oEvent.target || oEvent.srcElement).id;
                oTextbox.value += "\n    keyCode is " + oEvent.keyCode;
                oTextbox.value += "\n    charCode is " + oEvent.charCode;

                var arrKeys = [];
                if (oEvent.shiftKey) {
                    arrKeys.push("Shift");
                }

                if (oEvent.ctrlKey) {
                    arrKeys.push("Ctrl");
                }

                if (oEvent.altKey) {
                    arrKeys.push("Alt");
                }

                oTextbox.value += "\n    keys down are " + arrKeys;
            }
        </script>
    </head>
    <body>
        <p>Type some characters into the first textbox.</p>
        <p><textarea id="txtInput" rows="15" cols="50"
            onkeydown="handleEvent(event)"
            onkeyup="handleEvent(event)"
            onkeypress="handleEvent(event)"></textarea></p>
        <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>

顺序

1.用户按一次某字符按键时,会按以下顺序发生

1) keydown

2) keypress //keypress事件是在文本插入到文本框之前触发的

3)keyup

2.用户按一次某非字符按键时,会按以下顺序发生

1) keydown 2) keyup

当用户按下一个字符键不放时 ,keydown和keypress事件将逐个持续触发,直到松开键

当用户按下一个非字符键不放时 ,keydown事件将逐个持续触发,直到松开键

转载于:https://www.cnblogs.com/hubcarl/archive/2009/04/03/1428898.html