前端无处不在的事件

最新推荐文章于 2025-01-08 15:56:28 发布

宋王爷

最新推荐文章于 2025-01-08 15:56:28 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏：事件文章标签：事件事件绑定事件模型

本文链接：https://blog.youkuaiyun.com/divd567/article/details/77196096

事件专栏收录该内容

0 篇文章

订阅专栏

关于事件，可以说是不管任何语言都存在，只要涉及到交互上，比如：点击，鼠标移入移出，点击关闭，滚动页面，改变视窗大小等。

事件包括：鼠标事件，表单事件，系统事件，键盘事件，自定义事件....

鼠标事件：

1) onclick 鼠标点击事件

2) onmouseover 鼠标移入事件

3) onmouseout 鼠标移出事件

4) onmousemove 鼠标抚摸事件（鼠标）

5) onmouseup

6) onmousedown

.........

语法：

目标元素 . 事件行为. 函数（要执行的命令）

介绍了事件就不得不提DOM的操作事件绑定方法，事件所包含的比较特点的 : addEventListener , removeEventListener 。

为什么要这么用，其实也就是为了避免在协同办公中的一些影响问题。

举个例子: 点击变色

//样式部分
<style>
#box{
        height: 300px;
        background: red;
}
</style>

//代码部分
<body>
<div id="box"></div>
    <input type="button" id="btn" value="按钮"/>
        
    <script>
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
            
        btn.onclick=function(){
            if(box.style.background == "red"){
                box.style.background = "blue";
            } else(box.style.background="blue"){
                box.style.background = "red";
            }
        }
        </script>
</body>

这个是简单的点击事件，如果换成事件绑定应该如何操作呢？

<script>
var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        var on = false;
        var handle = function(){
        box.style.backgroundColor = on ? 'red' : 'blue';
        on = !on;
};
                
btn.addEventListener('click',handle,false);
</script>

事件绑定的语法

元素. addEventListener(type事件类型，handle函数（命令），false事件冒泡（默认）)

意思是新增一个事件，这里有个好处可以事件无限的绑定。

元素.removeEventListener(type , handle) 移除一个绑定事件；

stopPropagation() 停止事件执行，举个例子：

btn.addEventListener('click',function(event){
     event.stopPropagation();
},false)

上述代码的event 为事件对象。

以上述代码为例，事件的模型顺序：

上古时代分为 ‘事件冒泡’ 和 '事件捕获'；

事件冒泡： Element button → Element div → Element body → Element Html → Document

事件捕获： Document → Element Html → Element body → Element div → Element button

这些都已经过时了，目前主流的模型顺序是如何的呢？

事件捕获 → 目标 → 事件冒泡

（事件捕获）Document → Element Html → Element body → Element div （结束） Element button (目标) → Element div → Element body → Element Html → Document （事件冒泡）

Pritce:

1、事件包含哪些类型？

2、绑定事件的方法是哪些？

3、绑定事件有什么好处？

4、正常的事件模型是如何的？