Как минимизировать события JavaScript

Question

Мне нужно уменьшить количество событий javascript на странице моего веб-приложения. Было бы лучше перенести их в атрибут onclick элемента HTML?

, например

 <input ... onclick="myJavascript"/> 

в отличие от

 YAHOO.util.Event.addListener(element, 'click', handleElementClick, eventObject);

Проблема в том, что события Javascript являются наиболее ресурсоемким кодом, который я вижу в своем профилировщике Javascript (я использовал как инструменты разработчика, так и Firebug). Я хочу уменьшить нагрузку, и мне интересно, как лучше всего это сделать.

Answer 1

Лучшим решением было бы использовать делегирование события, которое регистрирует ОДНО событие. Вам просто нужно понюхать элемент, чтобы определить, нужно ли вам действовать. Это считается лучшим способом улучшить производительность событий javascript и не загрязнять DOM. Этот способ также будет работать для элемента DOM, добавленного на страницу с помощью Ajax, что означает, что вам не нужно привязывать события к новым элементам:

document.onclick = function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;

    if (target === myElement) {
        // do something here


}

Answer 2

Вообще говоря, вы должны хранить код вашего события внутри кода JavaScript, а не вставлять его в HTML.Это позволяет значительно упростить отладку в будущем, потому что она хранит все отличающиеся элементы логики в разных местах;Обычно желательно иметь всю структуру в HTML, всю презентацию в CSS и все функции на стороне клиента в JavaScript.Смешивание разных слоев не обязательно плохо, это обычно просто ненужное осложнение.

Однако, в общем смысле, лучший метод - это метод делегирования, который был опубликован до того, как я успел его напечатать.

Answer 3

Если вы хотите подключить более одного обработчика, я думаю, что второй метод лучше, и есть больше опций, зависит от используемой платформы