Как обрабатываются встроенные обработчики? - PullRequest
0 голосов
/ 04 мая 2011

У меня есть подозрение, что встроенными обработчиками являются evalled, но я не могу найти никакой информации по этому вопросу. Из любопытства: кто-нибудь знает, как обрабатываются такие обработчики? Для ясности я имею в виду встроенные обработчики, такие как:

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

и т.д.

1 Ответ

1 голос
/ 05 мая 2011

Внутренние атрибуты встроенных событий обрабатываются путем создания анонимной функции-оболочки, подобной этой:

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

Это означает, что содержимое атрибута eval редактируется, но только когда элемент вставляется в DOM (после этого функция находится в разобранном виде в памяти, как и другие обработчики событий). Это означает, что он не будет занимать намного больше памяти и времени, чем обработчики событий, назначенные в вашем собственном, отдельном коде JavaScript. И даже если код должен анализироваться каждый раз, когда происходит событие, это не будет иметь такого большого значения, что пользователь заметит это.

Однако есть веская причина не использовать встроенные атрибуты событий: хранить презентацию и логику отдельно друг от друга, что повышает удобочитаемость и удобство обслуживания. Другое преимущество состоит в том, что использование минификаторов менее болезненно, так как имена этих функций в файлах JavaScript могут изменяться в зависимости от настроек и интеллекта минификатора, но не от разметки (обойти эту проблему можно при использовании обозначения в квадратных скобках при определении эти функции в вашем коде (например, window['doSomethingReallyCunning'] = function (…) {…), поэтому имя функции будет сохранено, но это, конечно, не очень удачное решение, если есть гораздо лучшее). Если вы назначаете обработчики событий в своем коде только посредством прямой ссылки на функции, все экземпляры имени этой функции изменяются (конечно, то же самое относится и к параметрам setTimeout и setInterval).

...