如何处理内联处理程序？

Question

我怀疑内联处理程序是evalled，但找不到任何相关信息。出于好奇，那么：有谁知道这些处理程序是如何处理的？为清楚起见，我的意思是内联处理程序，如：

<a href="#" onclick="doSomethingReallyCunning()">...</a>
<input type="checkbox" onmouseover="this.checked=!this.checked;this.blur()"/>

等

Answer 1

在内部，通过创建一个匿名包装函数来处理内联事件属性，如下所示：

element.onclick = new Function("event", onclickAttribute);
// etc.

这意味着属性的内容是eval ed，但仅当元素插入到DOM中时（此后函数在内存中以解析形式存在，就像其他事件处理程序一样）。这意味着它不会比您自己的单独JavaScript代码中分配的事件处理程序消耗更多的内存和时间。即使每次事件发生时都必须解析代码，用户也不会注意到这一点。

但是，有一个很好的理由不使用内联事件属性：保持表示和逻辑彼此分离，这提高了可读性和可维护性。另一个优点是使用minifiers不那么痛苦，因为JavaScript文件中的那些函数名称可能会根据minifier的设置和智能而改变，但不会在你的标记中改变（解决这个问题的方法是在定义时使用方括号表示法）代码中的那些函数（如window['doSomethingReallyCunning'] = function (…) {…），因此函数名称将保持不变;但是，如果有更好的可用函数，这当然不是一个简洁的解决方案）。如果您只通过直接引用函数在代码中指定事件处理程序，则该函数名称的所有实例都会更改（当然，setTimeout和setInterval的参数也是如此。