js事件

绝地灬酷狼 2022-06-10 02:57 302阅读 0赞

10.事件

10.1事件的概念

事件源

事件名

事件注册

事件处理程序

以火灾为例

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

事件源：粤商大酒店201房间

事件名：火灾

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

事件处理：喷水作业

10.2常用事件

鼠标常用事件：

（1）click：单击事件

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

在这个案例中，事件源就是id为“p1”的元素，事件名是单击，事件注册是οnclick="fun()"

，也就是说当单击id为“p1”的元素时，就交由fun函数来处理

双击事件ondblclick

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

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

ommouseoner/onmouseout

与enter和leave很类似

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

鼠标移动onmousemove

键盘事件

keypress

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

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

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

但是可以通过shiftkey，ctrlkey等属性判断在击键的同时是否按下了shif、ctrl等辅助键

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

总结

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

如果把变量top1和left移入函数中，发现只能移动5像素，原因是函数内部的局部变量，在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值，如果需要保留，就只能使用全局变量了

其它事件：

onload：页面加载事件

onfocus：获得焦点的事件

onblue：失去焦点

<input type="text" id="text1" οnfοcus="focus1()" οnblur="blur1()">
    </body>
    <script>
        function focus1(){
            var text1 = document.getElementById("text1");
            text1.style.background = "red";
        }
        function blur1(){
            var text1 = document.getElementById("text1");
            text1.style.background = "blue";
        }

onchange：值改变事件

10.3事件的注册

三种方法：

1.使用onXXX属性，比如οnclick=”fun（）”

2.通过js去设置元素的onXXX属性

3.通过addEventListener注册

//注册事件的第二种方法
    var text1 = document.getElementById("text1");
    text1.onblur = blur1();
    //注册事件的第三种方法
    text1.addEventListener("change",change);

后两种方法有和好处

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

第三种方式addEventListener的第一个参数是事件名，第二个参数是事件处理函数。

可以添加事件监听，当然也就可以移除，使用removeEventListener，于addEventListener使用方法一样

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

10.4捕获和冒泡

在这个案例中，如果点击文字，先提示段落被单击了，然后在提示div被单击了，因为div是段落的父容器，所以单击段落也就单击了div，所以两者都会触发这个事件

但是如何去规定两个事件的处理顺序

这就是事件的冒泡和捕获

冒泡：按照从内到外的顺序依次触发，默认方式

捕获：反之