JS的事件类型（详解）

最新推荐文章于 2024-07-02 12:21:43 发布

搞前端的小菜

最新推荐文章于 2024-07-02 12:21:43 发布

阅读量2.4k

点赞数 1

分类专栏： JS基础文章标签：事件类型 JS事件

本文链接：https://blog.csdn.net/weixin_46726346/article/details/117465162

版权

JS基础专栏收录该内容

26 篇文章 12 订阅

订阅专栏

摘要

Web浏览器可能发生的事件有很多种类型，而这一篇我们针对于不同的浏览器的事件类型来说明一下，我们从DOM3级事件中总结了一下几种类型的事件：

事件类型	作用意义
UI事件	当用户在页面上的元素进行交互时触发
焦点事件	当元素获得或失去焦点时触发
鼠标事件	当用户通过鼠标在页面上执行操作时触发
滚轮事件	当使用鼠标滚轮时触发
文本事件	当在文档中输入文本时触发
键盘事件	当用户通过键盘在页面上执行操作时触发

当然除了这些类型我们还有一些其他类型的事件，不过在这里我们不做太多解释。

1.UI事件

UI事件指的是那些不一定与用户操作有关的事件。我们在这里列举四个：

(1) load

当页面完全加载后再window上面触发，当图像完全加载完在img元素上触发。
我们想要在页面完全加载完之后做出什么操作就可以这样：

        window.onload = function(){
            console.log('页面加载完毕');
        }

(2) unload

当页面完全写卸载后在window上触发，与load事件正好相对应。只要用户从一个页面切换到另一个页面，就会触发unload事件。

而我们利用这个事件最多的办法是清除引用，以避免内存泄漏。

(3) resize

当浏览器窗口被调整到一个新的高度或者宽度的时候，这个事件就会被触发。
我们来举个栗子：

        window.onresize = function(){
            console.log('页面大小改变了');
        }

这样只要浏览器的窗口大小改变，就会触发这个事件。

(4) scroll

当浏览器的滚动条在滚动的情况下，这个事件就会被触发。
我们再举个栗子：

<body style="height: 2000px;">
    <script>
        window.onscroll = function(){
            console.log('滚动条在滚动');
        }
    </script>
</body>

当我们给body的高度设置的大一点，这样就会有滚动条，然后当我们滚动条滚动后，就会触发这个事件。

2.焦点事件

焦点事件会在页面元素获得或失去焦点的时候触发。这一类事件最主要的两个是focus和blur，但是记住这两个事件是不冒泡的。

<input type="text" id="text">
    <script>
        text.onfocus = function(){
            console.log('获取焦点');
        }
        text.onblur = function(){
            console.log('失去焦点');
        }
    </script>

像这个例子中，当我们点击输入框时，会触发获取焦点的事件，点击外部后，会触发失去焦点的事件。

3.鼠标事件

鼠标事件是Web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备。
这里我们把最常用的事件列举出来：

事件类型	作用
click	用户单机鼠标或按下回车键时触发
dblclick	用户双击鼠标时触发
mousedown	用户按下了鼠标按钮的时候触发
mouseup	用户释放鼠标按钮的时候触发
mousemove	当鼠标指针在元素内部移动的时候触发
mouseout	在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
mouseover	在鼠标指针位于一个元素外部，然后用户首次移入另一个元素边界内时触发

我们先来看点击事件

<button id="btn">点击</button>
    <script>
        btn.ondblclick = function(){
            console.log('双击事件');
        }
        btn.onclick = function(){
            console.log('单机事件');
        }
        btn.onmousedown = function(){
            console.log('按下事件');
        }
        btn.onmouseup = function(){
            console.log('释放事件');
        }
    </script>

如果我们双击了一个元素，事件触发的顺序是这样的：

按下事件
释放事件
单机事件
按下事件
释放事件
单机事件
双击事件

然后我们再来看移入移出的事件：

<div id="div1"></div>
    <script>
        div1.onmousemove = function(){
            console.log('mousemove事件触发');
        }

        div1.onmouseout = function(){
            console.log('mouseout事件触发');
        }

        div1.onmouseover = function(){
            console.log('mouseover事件触发');
        }
    </script>