JavaScript中的浏览器事件简介

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        在我们的日常生活中，JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画，到复杂的前端框架，再到后端的Node.js，甚至还包括物联网设备。然而，JavaScript并非一成不变，它一直在发展，一直在添加新的特性和功能。今天，我们将探讨JavaScript中的一个重要的概念：浏览器事件。在这篇文章中，我们将详细介绍浏览器事件，包括它的定义、使用方法，以及如何在不支持浏览器事件的浏览器中进行polyfill。

​

✨ 正文

事件

        在浏览器中，事件是某事发生的信号。所有的DOM节点都会生成这样的信号。以下是一些最常用的DOM事件：

• 鼠标事件：click——当鼠标点击一个元素时（触摸屏设备会在点击时生成）；contextmenu——当鼠标右键点击一个元素时；mouseover/mouseout——当鼠标指针移入/离开一个元素时；mousedown/mouseup——当在元素上按下/释放鼠标按钮时；mousemove——当鼠标移动时。
• 键盘事件：keydown和keyup——当按下和松开一个按键时。
• 表单（form）元素事件：submit——当访问者提交了一个<form>时；focus——当访问者聚焦于一个元素时，例如聚焦于一个<input>。
• Document事件：DOMContentLoaded——当HTML的加载和处理均完成，DOM被完全构建完成时。
• CSS事件：transitionend——当一个CSS动画完成时。

事件处理程序

        为了对事件作出响应，我们可以分配一个处理程序（handler）——一个在事件发生时运行的函数。处理程序是在发生用户行为（action）时运行JavaScript代码的一种方式。有几种分配处理程序的方法。

HTML特性

        处理程序可以设置在HTML中名为on<event>的特性（attribute）中。例如，要为一个input分配一个click处理程序，我们可以使用onclick，像这样：

<input value="Click me" onclick="alert('Click!')" type="button">

        在鼠标点击时，onclick中的代码就会运行。请注意，在onclick中，我们使用单引号，因为特性本身使用的是双引号。如果我们忘记了代码是在特性中的，而使用了双引号，像这样：onclick="alert ("Click!")"，那么它就无法正确运行。

DOM属性

我们可以使用DOM属性on<event>来分配处理程序。例如elem.onclick：

<input id="elem" type="button" value="Click me">
<script>
elem.onclick = function() {
    alert('Thank you');
};
</script>

        如果一个处理程序是通过HTML特性（attribute）分配的，那么随后浏览器读取它，并从特性的内容创建一个新函数，并将这个函数写入DOM属性（property）。因此，这种方法实际上与前一种方法相同。

访问元素：this

        处理程序中的this的值是对应的元素。就是处理程序所在的那个元素。下面这行代码中的button使用this.innerHTML来显示它的内容：

<button onclick="alert(this.innerHTML)"> Click me </button>

✨ 结语

        JavaScript的浏览器事件为我们打开了一个全新的世界，让我们能够在JavaScript中处理任意大小的字符。虽然浏览器事件在一些方面与常规的字符有所不同，但是只要我们理解了这些差异，并知道如何正确地使用浏览器事件，我们就能够充分利用它的强大功能。无论你是正在处理大数据，还是在进行高精度计算，浏览器事件都能够提供强大的支持。希望这篇文章能够帮助你理解和掌握JavaScript中的浏览器事件，让你在编程的道路上更进一步。如果你有任何问题或者需要更深入的讨论，欢迎随时向我提问！

​