Question

任何编程语言中的事件监听器如何在内部实际工作？这篇文章的重点是全面了解事件监听器的工作原理。前段时间，当我第一次开始使用Javascript和Html时，每次我需要创建一个按钮来执行操作时，让我们说执行功能＆＃39; my_func（）;＆＃39; ，我只想去...

<button onclick="my_func();">Click me</button>

这很棒，一个按钮，大部分时间都处于空闲状态，除非点击。然后，它将执行相应的功能。

然后我遇到了事件监听器。基本上，事件监听器是等待事件发生的计算机程序中的过程或函数。我想到的第一件事是：当你创建一个事件监听器时，这基本上只是创建一个无限循环来检查是否有某些东西被触发了？如果您有数十个或数百个要监听的事件，那么效率不高吗？数百个循环每秒检查不同的特定条件？你为什么要用它而不是漂亮的＆＃39; onclick＆＃39; ？

我将继续发布我找到的答案，（不是在StackOverflow中，这就是为什么我决定在这里发布它，以便扩大本网站已经很大的内容）。在我读到的所有内容中，这个答案是最让我信服的答案。但是，如果你知道你认为会增加主题的内容，请随意分享你的知识（越多越好）。

Answer 1

从onclick和addEventListener运行事件处理程序之间的差别很小。在这两种情况下，它只是将处理程序附加到相关的DOM元素。它们之间唯一明显的区别是你只能有一个onclick属性，但每次调用addEventListener()时它都会添加到该元素的监听器列表中 - 内部有一组监听器{ {1}}推进。

但处理这些事件处理程序的方式基本相同。当click事件发送到元素时，浏览器会查找其addEventListener()属性和onclick侦听器列表，并执行所有这些操作。他们之间的效率没有区别。唯一无限循环是浏览器的主事件循环，它处理从OS接收的所有事件，查找适当的DOM元素，查看它们是否具有该事件的处理程序，以及调用处理程序。

Answer 2

正如其他人所说，内部两者没有区别。但是使用addEventListener（）方法，您可以轻松地在单个事件上附加多个函数，而不是在有大量脚本时进行连接。

使用addEventListener（）

脚本1

myEle.addEventLister('click', myFunc);

脚本2

myEle.addEventLister('click', myFunc2);

您可以看到在元素事件上附加函数是多么容易。

使用setAttribute（）

脚本1

myEle.setAttribute('onclick', myFunc);

脚本2

myEle.setAttribute('onclick', myEle.getAttribute('onclick') + myFunc2);

额外的代码有点麻烦

Answer 3

核心问题如下：如果您有数十个或数百个要监听的事件，那么效率不高吗？

事实是，如果是这样的话，那将是非常低效的。这就是为什么它没有这样做的原因。程序（在Java的情况下）或浏览器（在Javascript的情况下）， 每次发生事件时都会从操作系统接收事件 - 移动鼠标时，按下某个键时，调整窗口大小时，定时器事件到期时等等。对于每个事件，浏览器需要确定是否需要调度事件处理程序。例如，在鼠标左键向下事件中，它需要获取鼠标的坐标并找出其下面的元素，然后 然后检查是否有为这些事件注册的事件侦听器 ，如果有的话，将它们添加到事件队列中，以便下次引擎空闲时执行。

如果您认为存在错误或某种程度上不准确，请随时添加信息或更正我。

Answer 4

对于 实用目的 ，“onclick”和“EventListener”属性之间没有区别。总而言之，这就是它们是你在特定对象中添加或删除的属性。结果，因为它们是属性，而不仅仅是方法，它们不会自行循环，而是作为窗口中不断出现的“常规事件循环”的参数。因此，效率缺乏差异。

但是，如果你有大量的事件监听器，或大量不同对象的onclick属性，它可能会降低整体执行速度，因为一般循环必须通过更多元素来检查特定发生的事件，如果有什么东西听的话;但这种情况不可思议地说明了你如何处理你的事件（有听众，onclick属性等）。

因此，我将最后说，这些事件处理程序的处理方式没有实际差别。当特定事件被发送到元素时，浏览器查找与该特定事件相关的其属性和/或侦听器列表，并执行它们中的每一个。他们之间的效率没有区别。唯一的无限循环是“通用窗口循环”或主事件循环，它处理所有发生的事件，并查找相应的对象以检查与该事件相关的任何处理程序，如果找到任何处理程序，则调用附加功能。

事件听众效率

4 个答案: