内嵌处理程序是如何处理的？

我怀疑内联处理程序是evalled，但无法找到任何信息。出于好奇：那么有人知道如何处理这样的处理程序？为了清楚起见，我的意思是在线处理程序，如：内嵌处理程序是如何处理的？

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

等

来源

2011-05-04 KooiInc

在哪个浏览器中？ – Quentin 2011-05-04 10:28:45

任何浏览器，我想？ – KooiInc 2011-05-04 10:29:40

我认为这是之前问过的，但我找不到它。获取属性的内容并创建一个新的函数，该函数体和'event'作为参数（至少在W3C兼容的浏览器中）。这是你想知道的吗？还是更详细？ – 2011-05-04 10:37:34

内部，内联事件的属性通过创建一个匿名包装函数这样的处理：

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

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

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

来源

2011-05-05 11:21:12

感谢您的回答。我知道结构和逻辑（或结构和行为）的分离，但最小化者的论点也是强大的。无论如何，函数名称都可以在代码中更改，所以如果您使用第三方脚本并从该内联引用函数，则它是相同的参数。我多年来一直没有使用内联处理程序，但几天前在一些SO问题之后对它的机制不安全。 – KooiInc 2011-05-05 11:55:20

@Kooilnc：如果我可以问哪一个？ – 2011-05-05 11:58:13

内嵌处理程序是如何处理的？

回答

相关问题