JS事件10

最新推荐文章于 2024-04-25 20:29:33 发布

wj他

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量254

点赞数

分类专栏： JS 文章标签： click onmousedow onmousemov keypress keydown

本文链接：https://blog.csdn.net/qq_39279061/article/details/76930164

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

10.1 事件的概念

事件源
事件名
事件注册
事件处理
以火灾为例：
粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。
事件源：粤商大酒店201房间
事件名：火灾
事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖消防支队负责
事件处理：成功灭火

10.2 常用事件

鼠标的常用事件：

（1）click 单击事件

<script>
 function fun(){
     //获取到指定元素
     var p1 = document.getElementById("p1");
     p1.innerText = "我被单击了";
     p1.style.fontSize = "60px"
 }
</script>
<body>
    <p id="p1" onclick="fun()">单击事件测试</p>
</body>

在这个案例中，事件源就是id为p1的元素，事件名是单击，事件的注册是οnclick=”fun()”，也就是说当单机id为p1的元素时，就交给fun函数处理

（2）

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: #4998ff;
    }
</style>
<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>
<body>
    <div id="div1" onclick="zoomout()" ondblclick="zoomin()"></div>
</body>

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

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: #4998ff;
    }
</style>
<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>
<body>
<div id="div1" onmousedown="zoomout()" onmouseup="zoomin()"></div>
</body>

（4）鼠标移入/离开

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: #4998ff;
    }
</style>
<script>
    function red() {
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "red";
    }
    function blue() {
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "blue";
    }
</script>
<body>
<div id="div1" onmouseenter="red()" onmouseleave="blue()">
</div>
</body>

（6）鼠标移动onmousemove

<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>
<script>
    var width = 100;
    var height = 100;
    function wheel(e){
        if(e.wheelDelta > 0){
            width += 5;
            height += 5;
        }else{
            width -= 5;
            height -= 5;
        }
        var div1 = document.getElementById("div1");
        div1.style.width = width + "px";
        div1.style.height = height + "px";
    }
</script>
<body>
<div id="div1" onmousewheel= "wheel(event)"></div>
</body>

键盘事件
（1）keypress

<script>
    function search(e){
        if(e.keyCode == 13){
            var what = document.getElementById("what");
            alert("开始搜索："+what.value);
        }
    }
</script>
<body>
<input id="what" type="text" onkeypress="search(event)">
</body>

keyCode属性记录了按下的Shift键的编码。
Keypress事件只能捕获可打印字符的键，不能捕获像shift、Ctrl、alt等不可打印字符的按键。
但是可以通过shiftkey、ctrlkry等属性判断在击键的同时是否

<script>
    function search(e){
        alert(e.keyCode);
        if(e.shiftKey){
            alert("shift也被按下了");
        }
        if(e.ctrKey){
            alert("ctr也被按下了");
        }
    }
</script>
<body>
<input id="what" type="text" onkeypress="search(event)">
</body>

（2）keydown、keyup

<script>
    function keydown(e){
        alert(e.keyCode);
    }
</script>
<body>
<input id="what" type="text" onkeydown="keydown(event)">
</body>
keydown、keyup可以捕获键盘上所有的键（个别除外）。
<style type="text/css">
    #img1 {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<script>
    var top1 = 0;
    var left = 0;
    function move(e) {
//        var top1 = 0;
//        var left = 0;
        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>
<body onkeydown="move(event)">
<img id="img1" src="man.png">
</body>

总结：
（1）使用变量top导致上下移动失败，原因是和window。Top这个全局变量冲突了，换个变量名就好啦。
（2）如果把变量top1和left移入函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不能保留上一级的值。如果需要保留，就只能用全局变量了。
其它事件：
Onload：页面加载事件
Onfocus：获得焦点的事件
Onblur：失去焦点的事件（12）
Onchange：值改变事件