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

来源：互联网发布：爱奇艺会员淘宝没卖了编辑：程序博客网时间：2024/05/09 07:49

鼠标的常用事件：

（1）onclick 单击事件

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

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

（2）ondblclick双击事件

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

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

<body>
    <div id="div1"onmouseenter="zoomout()"onmouseleave="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

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

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

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

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

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

（2）keydown、keyup

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

keydown、keyup可以捕获键盘上所有的键（个别除外）。

总结：

1）top变量会导致上下移动失败，原因是和window.top这个全局变量冲突，换个名字就好了。

2）如果把变量top1和left移到函数里边，上下左右都只能移动5个像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都为0，不会保留上一次的值，如果需要保留，就只能使用全局变量。

其他事件

onload：页面加载事件

onfocus：获取焦点的事件

onblur：失去焦点

onchange：值改变事件

阅读全文

0 0