本文深入探讨了 JavaScript 中处理事件的两种不同方式：熟悉的 onclick 和通用的 addEventListener 方法。 通过深入研究这两种机制的细微差别，我们揭示了它们各自提供的独特优势以及它们擅长的情况，分析 onclick 和 addEventListener 的语法、行为和兼容性，使您在实现基于事件的交互时做出明智的选择。
onclick和addEventListener的定义
onclick定义：
onclick 是一个 html 属性，用于在用户单击特定元素（例如按钮或链接）时执行 JavaScript 代码。 此属性允许开发人员直接在 HTML 标记中定义内联事件处理。 当用户单击某个元素时，会触发指定的 JavaScript 代码，从而实现交互性和用户触发的操作。 虽然使用简单，但 onclick 仅限于单个事件处理程序，并且在处理同一元素上的多个事件或更复杂的情况时可能会变得很麻烦。
addEventListener定义：
addEventListener 是 JavaScript 中的一种方法，允许开发人员将事件处理程序动态附加到 HTML 元素。 与 onclick 等内联事件属性相比，它提供了更灵活、更强大的方法。 使用addEventListener，可以将多个事件侦听器添加到同一元素，并且事件处理可以更有组织性和可维护性。 它还提供对事件传播、捕获和冒泡阶段的控制。 此外，addEventListener 除了支持单击之外还支持多种事件类型，从而扩展了其处理各种用户交互和应用程序行为的有用性。
onclick和addEventListener的区别
onclick 和 addEventListener 都是在 JavaScript 中用于处理 dom 元素事件的方法。然而，它们之间有几个重要的区别。
函数声明方式：
onclick 是一个属性，可以直接在 HTML 标签中使用，例如 <button onclick="myFunction()">Click me</button>。在 JavaScript 中，你可以通过 element.onclick 来设置或获取此属性。
addEventListener 是一个方法，需要在 JavaScript 中调用，例如 element.addEventListener('click', myFunction)。
事件处理程序的位置：
onclick 可以在 HTML 标签中直接放置 JavaScript 代码，这对于简单的用例来说更方便，但这样做可能会使 HTML 和 JavaScript 代码混淆，不易于维护。
addEventListener 通常将 JavaScript 代码与 HTML 分离，使代码更清晰，更易于维护。
事件处理程序的作用域和执行上下文：
当使用 onclick 时，事件处理程序的 this 值通常指向全局对象（在浏览器中通常是 window）。
当使用 addEventListener 时，事件处理程序的 this 值可以指向触发事件的元素本身。
事件处理程序的生命周期：
onclick 只在元素被首次加载时执行一次。如果你后来改变了元素的 onclick 属性，这并不会影响已经注册的点击事件处理程序。
addEventListener 可以动态添加和移除事件监听器，这意味着你可以在元素的生命周期中多次添加和移除同一个事件监听器。
事件处理程序的移除：
onclick 没有提供直接移除事件处理程序的方法。如果你想移除一个事件处理程序，你需要手动存储这个处理程序的引用，并在适当的时候调用 removeAttribute 方法。
addEventListener 提供了一个 removeEventListener 方法来移除事件监听器。你只需要传递相同的参数（事件类型和处理程序函数）即可。
事件处理程序的并发性：
onclick 不支持并发处理程序。如果一个元素有多个 onclick 处理程序，它们将按照添加的顺序执行，后面的处理程序会等待前面的处理程序执行完毕。
addEventListener 支持并发处理程序。你可以为同一个事件添加多个处理程序，它们会按照添加的顺序执行，但后面的处理程序不需要等待前面的处理程序执行完毕。
自定义事件和命名空间：
addEventListener 支持自定义事件和命名空间，例如 element.addEventListener('myEvent', myFunction) 或 element.addEventListener('myEvent.namespace', myFunction)。
onclick 不支持自定义事件和命名空间。
错误处理：
addEventListener 提供了一个可选的第三个参数来指定在错误发生时执行的回调函数。
onclick 没有这样的错误处理机制。如果一个 onclick 处理程序抛出错误，这可能会导致整个浏览器崩溃或引发其他问题。
js中addEventListener事件监听器参数详解
我们都知道addEventListener() 的参数约定是：useCapture是可选参数，默认值为false，目前DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...
js监听浏览器返回，pushState，popstate 事件，window.history对象
在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
CSS中的pointer-events属性实现点穿效果
具有层级关系的结构中，使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获，从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候，top元素注册的事件将会被捕获/冒泡触发
js鼠标事件参数，获取鼠标在网页中的坐标
事件对象 event，JavaScript 将事件event作为参数传递，IE中把 event 事件对象作为全局对象 window 的一个属性，获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标
js事件冒泡和默认事件处理(原生js、vue)
何为默认事件？比如 a 会跳转页面，submit 会提交表单等。普通js方法：e.preventDefault()函数。Vue.js方法： .prevent 是vue 的内置修饰符，调用了 event.preventDefault()阻止默认事件
js keyup、keypress和keydown事件 详解
js keyup、keypress和keydown事件都是有关于键盘的事件，当一个按键被pressed 或released在每一个现代浏览器中，都可能有三种客户端事件。
深入nodejs-核心模块Events详解（事件驱动）
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。比如，文件操作中的fs事件流，网络编程所用到的tcp，http模块等，当你回想自己写的程序后，会发现很多操作都基于事件驱动，Events类。
纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式，给需要的人和给自己做个笔记：实现原理利用CSS伪类:target
关于鼠标移动太快导致moseleave事件不触发的问题
我做的是一个table的编辑功能，当移入某行的时候展示编辑状态，在移出某行的时候显示的是原始状态，此时遇到一种情况，就是.当mousenter事件触发之后，由于鼠标移动得太快，同一个tr上绑定的mouseleave事件压根儿就没有执行。
Js事件传播流程
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!