嘿，各位较小伙伴！今天咱们来聊聊 JavaScript 中的一个超级十分沉关键概念——事件。它就像是浏览器跟你沟通的方式，告诉你发生了哪些事情。别看它看起来简洁，但其实背后的原理挺繁杂的，掌握它能让你写出更流畅、更健壮的前端代码。

哪些是JavaScript事件？

事件 简洁就是浏览器发生的各种“事情”，比如点击按钮、鼠标移动、键盘按下等等。这一些事情会触发相应的 JavaScript 代码落实。 想象一下你关心的不是具体的是哪些，而是整个页面在发生改变，有啥说啥...。

拿具体情况各个事件都对应着一个 Event 对象。当前这个对象包含了关于事件的信息，比如哪个元素触发了事件、鼠标的坐标在哪里等等。 我比较认同... 当某个元素发生特定类型的事件时浏览器会生成一个 Event 对象并把它传递给那一些注册了对应处理函数的元素。

核心概念：监听器

监听器 就是你在告诉 JavaScript：当某个特定的事件发生时请落实我指定的代码！ 监听器是一段 JavaScript 代码，它持续留意某个 DOM 元素有没有发生了特定事件。 它能够明白为一种“等待”机制。

怎样实现JavaScript事件监听？

`addEventListener` 方法

`addEventListener` 是 JavaSc 实不相瞒... ript 中最常用的方法来添加事件监听器。它的语法如下：

• element: 要添加监听器的 DOM 元素
• eventType: 要监听的事件类型
• eventHandler: 要落实的代码块，当指定事件发生时会被调用
• options : 一些配置选项。

const button = document.getElementById; // 获取按钮元素
button.addEventListener { // 添加点击事件监听器  console.log; }); // 落实完后立刻运行

`onclick` 属性

注意！虽然能够采用 `element.onclick = function {}` 来绑定点击事件，但这是一种非常不推荐的做法。 摆烂。 这是因为这种方式只能绑定一个监听器，而且无法控制捕获/冒泡阶段。调试的时候很简单出现问题。

事件委托：优化DOM操作

我傻了。 事件委托 是一个非常有用的技巧，能够用来优化 DOM 操作和提升性能。 当你需要在更多个不同子元素上绑定同一个事件时直接在各个子元素上添加监听器会非常麻烦和简单出错 。举个例子动态插入的元素要**监听委托** **别在插入后一个个 `addEventListener` —— 简单漏绑、不容简单清理** 。用**事件委托**更稳：

• 将全部子元素的监听器添加到父元素上
• 当父元素上的事件发生时 , 全部子元素的相应回调函数都会被落实

const parentElement = document.getElementById; // 父容器
parentElement.addEventListener { // 在父容器上添加点击 事件处理函数  console.log; }); // event 对象包含全部被点击的子元素的坐标等信息

事件机制较深入明白

其实 JavaScript 的事件机制远比表面上繁杂一些 。 它本质上是一套约定：当某个条件满足时 ， 上手。 浏览器会生成一个 Event 对象 ，并按规则分发给匹配的监听器。

捕获与冒泡

捕获模式和冒泡模式是两种不同的 事件传递方式 。

• 捕获模式 ： 事件先来看从文档根节点启动传播到其祖先节点 ，然后依次传递给目标节点 。

• 冒泡模式 ： 事件从目标节点启动传播到其父节点 ，然后依次传递给祖先节点 。

// 采用 addEventListener 能够设置捕获或冒泡模式
document.getElementById.addEventListener { console.log; }, true); // 设置为捕获模式
document.getElementById.addEventListener { console.log; }, false); // 设置为冒泡模式

常见陷阱和注意事项

一句话。 别用 `onclick="..."` 行内属性 ，也别直接赋值 `= handler` 。它们只能绑定一个监听器 ，且无法控制捕获/冒泡阶段 ，调试时还简单被覆盖。

//❌失利！函数引用不同