js事件处理

最新推荐文章于 2020-02-19 14:53:19 发布

LCfree_Lc

最新推荐文章于 2020-02-19 14:53:19 发布

阅读量271

点赞数

本文链接：https://blog.csdn.net/qq_36993666/article/details/77267210

版权

事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

xxxx大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，现场通过喷水作业成功灭火。

事件源：xxxx大酒店201。

事件名：火灾

事件注册：事先以规划好片区，xxxx大酒店所属片区归南湖区消防支队负责

事件处理：喷水

常用事件

鼠标的常用事件：

（1）单击事件

在这个案例中，事件源是id为“p1”的元素，事件名是单击，时间注册

是onlick=“fun（）”，也就是单击为“P1元素时，就交由函数处理”

（3）鼠标按下弹起（）

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="100";
            div1.style.height="100px";
        }

    </script>
</head>
<body>
<div id="div1" οnmοusedοwn="zoomout()" οnmοuseup="zoomin()"></div>

（4）鼠标移入/离开 onmouseseenter/onmouseleave

        #div1 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </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>
</head>
<body>
<div id="div1" οnmοuseenter="red()" οnmοuseleave="blue()"></div>
</body>

（5）onmouseover onmouseout

与onmouseenter、onmouseleave很类似，区别后面再讲

（6）鼠标的移动（move）

键盘事件

（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等辅助键。

（2）keydown。keyup

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

keydown，keyup可以捕获键盘上所有的键

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";
}

总结：

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

（2）如果把变量top1和left移入函数中，发现只能移动5像素。愿因是函数内部

的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top

的值都是0，不会保留上一次的值，如果需要保留，就用全局变量。

其他事件：

onload：页面的加载事件

onfocus：获得焦点的事件

onblur：失去焦点事件

onchange：值改变事件

事件的注册

三种方法：

（1）使用onXXX属性，比如：οnclick=“fun()”
（2）通过js去设置元素的onXXX属性
（3）通过addEventListener注册

var txt1 = document.getElementById("txt1");
//注册事件的第二种方法
txt1.onblur = blur1;
//注册事件的第三种方法
txt1.addEventListener("change",change);
function focus1(){
    txt1.style.backgroundColor = "blue";
}
function blur1(){
    var txt1 = document.getElementById("txt1");
    txt1.style.backgroundColor = "red";
}
function change(){
    alert("值改变了")
}

后两种方法有何好处？将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成的，行为（实际上就是js的内容）往往是程序员的事，分离后，利于分工合作。

第三种方式addEventListener的第一个参数，第二个参数是事件处理函数。可以添加事件监听，当然也可以移除，用的是removeEvenListener。参数和与addEventListener参数是一样的。

而且通过removeEvenListener和addEventListener甚至我们可以去动态地去注册不同的事件处理程序。

捕获和冒泡

var div1 = document.getElementById("div1");
var p1 = document.getElementById("p1");
p1.addEventListener("click",click1);
div1.addEventListener("click",click2);
function click1(){
alert("段落被单击了")
}
function click2(){
alert("div被单击了")
}

在这个案例中，如果单击文字，先提示“段落被单击”，然后提示：“div被单击”。因为div是段落的父容器，所以单击段落也就被单击了div，所以两者都会触发这个事件。
但是如何规定这两个事件的处理顺序呢？这就是事件的冒泡和捕获。
冒泡：按照从内到外的顺序依次触发，默认方式；
捕获：反之

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="">
        div{
            border: 1px solid blue;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>

</head>
<body>
<div id="div1">
    <div id="div2">

    </div>
</div>
</body>
<script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div1.onmouseover = enter1;
    div2.onmouseover = enter2;
    /*div1.onmouseenter = leave1;
    div2.onmouseenter = leave2;*/
    function enter1(){
        alert("进入div1")
    }
    function enter2(){
        alert("进入div2")
    }
   /* function leave1(){
        alert("离开div1")
    }
    function leave2(){
        alert("离开div2")
    }*/
</script>
</html>

当使用mouseenter事件时，当里层的div触发进入事件时，处理完就完事了；而使用mouseover事件时，当里层的div触发进入事件时，处理完还会冒泡给父容器处理进入事件

当程序员可以根据需要自己去阻断冒泡

LCfree_Lc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件处理

事件的概念事件源事件名事件注册事件处理以火灾为例：xxxx大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，现场通过喷水作业成功灭火。事件源：xxxx大酒店201。事件名：火灾事件注册：事先以规划好片区，xxxx大酒店所属片区归南湖区消防支队负责事件处理：喷水常用事件鼠标的常用事件：（1）单击事件 fun
复制链接

扫一扫