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

鼠标的常用事件:

(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双击事件

<style>
        #div1
{
           
height: 100px;
           
width: 100px;
           
background:#ff2f00;
       
}
   
</style>
</head>
<body>
    <div
id="div1"οnclick="zoomout()" οndblclick="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>

(3)鼠标按下/弹起事件(onmousedown/onmouseup)

<style>
        #div1
{
           
height: 100px;
           
width: 100px;
           
background:#ff2f00;
       
}
   
</style>
</head>
<body>
    <div
id="div1"οnmοusedοwn="zoomout()" οnmοuseup="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>

 

(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>

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

<style>
        #img1
{
           
position: absolute;
       
}
   
</style>
</head>
<body
οnkeydοwn="move(event)">
    <img
id="img1"src="ren.png">
</body>
<script>
   
var top1= 0;
    var
left = 0;
    function
move(e) {
       
switch(e.keyCode){
           
case 37: left -= 5;break;
            case
38: top1 -= 5;break;
            case
39: left += 5;break;
            case
40: top1 += 5;break;
       
}
       
var img1= document.getElementById("img1");
       
img1.style.top= top1+"px";
       
img1.style.left= left+"px";
   
}
</script>

总结:

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

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

 

其他事件

onload:页面加载事件

onfocus:获取焦点的事件

onblur:失去焦点

onchange:值改变事件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值