常用的事件类型/键盘和鼠标

最新推荐文章于 2025-03-25 21:42:58 发布

old_man31

最新推荐文章于 2025-03-25 21:42:58 发布

阅读量515

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/old_man31/article/details/86834059

版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

<!--常用的事件类型/
onclick 单击鼠标左键触发
ondbclick 双击鼠标左键触发
onmousedown 单击任意一个鼠标按键触发
onmouseout 鼠标指针移出一个元素边界时触发
onmousemove 鼠标在某个元素上移动时持续触发
onmouseup 松开鼠标任意一个按键时触发
onmouseover 鼠标指针移到一个元素上时触发

常用的键盘事件
onkeydown  按下键盘某个按键时触发，一直按会持续触发
onkeyup    释放某个按键时触发
onkeypress   按下某个按键并产生字符时触发，忽略shift等功能键
//鼠标事件案例
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function handle(oEvent){
            if (window.event) oEvent=window.event;
            var oDiv=document.getElementById('display');// 不能加s
            oDiv.innerHTML+=oEvent.type+'<br/>';
        }
        window.function () {
            var oImg = document.getElementsByTagName('img')[0];
            oImg.onclick=handle;
            oImg.onmousedown = handle;
            oImg.onmouseup = handle;
            oImg.ondblclick = handle;
            oImg.onmouseover = handle;
            oImg.onmouseout = handle;
        }
    </script>
</head>
<body>
<img src="images/logo.png" alt="">
<div id="display"></div>
</body>
</html>-->

<!--键盘事件的案例-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //  先获取键盘事件，并将键盘事件的值在div中展示出来
        function handle(oEvent) {
            if(window.event) oEvent=window.event;
            var oDiv = document.getElementById('display');
            oDiv.innerHTML += oEvent.type+'<br/>';
        }
        window.function () {
            // var oImg = document.getElementsByTagName('img')[0];
            // oImg.onclick=handle;
            // oImg.onmouseout=handle;
            // oImg.onmouseup=handle;
            // oImg.onmousedown=handle;
            // oImg.onmouseover=handle;

            var oTextarea = document.getElementById('mytext');
            oTextarea.onkeydown=handle;
            oTextarea.onkeyup=handle;
            oTextarea.onkeypress=handle;
        }
        //  给图片绑定键盘事件
    </script>
</head>
<body>
<textarea id="mytext" style="width: 200px;height:50px"></textarea>
<!--<img src="images/logo.png" alt="">-->
<div id="display"></div>
</body>
</html>
双击鼠标ie和标准DOM不一样。