Question

element.onclick = function() { 
    myFunction(); 
};

function myFunction() {
    // 100, 500 or 1000 lines of code
}

是否，如果是，内部的代码如何影响点击事件的重量？

PS！我对事件监听器整体中的代码影响感兴趣，而不仅仅是我的示例中的函数。如果有500行代码而不是函数怎么办？

myFunction()代码有多大？

在触发点击事件之前，是否会处理？

我不表示对它被按下的时刻的影响，但在此之前：如果事件附加到元素上。

我问这个是因为我需要将相同的click事件附加到许多元素，而且里面的代码非常大。在我的情况下，事件授权不是一个选项。 示例：

for(i = 0; i < 500; i++) { //Just for the sake of this example var element = document.createElement('div'); element.onclick = function() { myFunction(); }; } function myFunction() { // 100, 500 or 1000 lines of code }

基于这个例子，我应该考虑或担心myFunction()的大小吗？

Answer 1

当JavaScript函数读入文件时，它将由JavaScript运行时处理。在回调中调用它时将调用它。如果函数是10行或1000行，则回调调用函数的时间也没有区别。

编辑：随着代码量的增加，您可能会注意到函数更改的执行时间，但调用不应更改。更改调用速度的事情是查找对象中的嵌套函数：obj1.obj2.obj3.obj4.obj5.func（）将比顶级func（）定义慢（如果它不是嵌套的，则不应该大不相同深入大物体。）

Answer 2

首先，Javascript是一个单线程生态系统。

有一个很大的事件循环，它会一个接一个地执行一个事件。

如果您的onclick需要很长时间，您可能会看到突出的“A脚本没有响应”

单击它时会发生处理。

“大事件循环”读取click事件并为其调用所有事件处理程序。因此，单击会触发正在处理的所有单击事件处理程序。（对于点击区域下的元素）

如果您的问题是无响应的脚本，您可以尝试WebWorkers。我从来没有玩过这些，因为它很新。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

关于具有相同点击处理程序的500个元素...您一次只能点击一个项目，不是吗？也许试试

event.stopPropagation();

点击事件中的代码影响？

2 个答案: