JS中常用的鼠标和键盘事件

最新推荐文章于 2024-09-15 17:50:11 发布

还很菜的小伙

最新推荐文章于 2024-09-15 17:50:11 发布

阅读量805

点赞数

文章标签： javascript 鼠标常用事件键盘按键获取

本文链接：https://blog.csdn.net/qq_36687674/article/details/76947691

版权

鼠标的常用事件：

（1）onclick 单击事件

<body>
<p id="p1" οnclick="fun()">单击事件测试</p>
</body>
<script>
    function fun() {
        var p1 =document.getElementById("p1");
        p1.innerText= "点击事件测试成功！";
        p1.style.fontSize = "40px";
    }
</script>

事件源就是id为“p1”的元素，事件名就是单击，事件注册是：οnclick=“fun()”,当单击“p1”时，函数fun来进行处理。

（2）ondblclick双击事件

（3）鼠标按下/弹起事件（onmousedown/onmouseup）

（4）鼠标移入和离开（onmouseenter/onmouseleave）

<body>
    <div id="div1"οnmοuseenter="zoomout()" οnmοuseleave="zoomin()" >
    </div>
</body>
<script>
    function zoomout() {
        var div1= document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin() {
        var div1= document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>

（5）鼠标移上/移开事件（onmouseover/onmouseout）

与onmousenter和onmouseleave类似

（6）鼠标移动事件onmousemove。

（7）鼠标滚轮滚动事件onmousewheel

键盘事件

（1）keypress

function search(e) {
    if (e.keyCode == 13){
        var what= document.getElementById("what");
        alert("开始搜索："+what.value);
    }
}

keyCode属性记录了按下的键的编码。

keypress事件只能捕获可以打印字符的按键，不能捕获shift、ctrl、alt等不可打印字符的按键。

但是可以通过shiftKey、ctrlKey等属性判断在击键的同时是否按下了shift、ctrl等辅助键。

function search(e) {
    alert(e.keyCode);
    if(e.shiftKey){
        alert("shift键也被按下了");
    }
    if(e.ctrlKey){
        alert("ctrl键也被按下了");
    }
}

（2）keydown、keyup

<body>
    <input id="what"type="text" οnkeydοwn="keydown(event)">
</body>
<script>
    function keydown(e) {
        alert(e.keyCode);
    }
</script>