Правильно привязать события javascript

Ответ 1

Есть два разных способа сделать это. Только один будет работать; который зависит от браузера. Здесь используется метод утилиты, который использует оба:

function bindEvent(element, type, handler) {
   if(element.addEventListener) {
      element.addEventListener(type, handler, false);
   } else {
      element.attachEvent('on'+type, handler);
   }
}

В вашем случае:

bindEvent(window, 'load', function() {
    // all elements such as images are loaded here
});

Ответ 2

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

@d. ответа будет достаточно просто для конкретного случая события load window, которое вы ищете. Но это может дать начинающим читателям вашего кода ложное представление о том, "правильно ли это". Просто потому, что вы связали мероприятие, это не значит, что вы позаботились о его нормализации. Возможно, вам лучше всего установить window.onload:

window.onload = (function(onload) {
  return function(event) {
    onload && onload(event);

    // now do your thing here
  }
}(window.onload))

Но для общего случая привязки события @d. ответ настолько далек от удовлетворения, что разочаровывает. Единственное, что он делает правильно - это использование функции обнаружения, в отличие от обнаружения браузера.

Не нужно слишком много говорить о том, но привязка событий JavaScript, вероятно, является причиной №1 для библиотеки JavaScript. Мне все равно, кто это, другие люди исправляли эту проблему снова и снова. Ниже приведены вопросы, связанные с реализацией дома в вашей функции обработчика:

• Как мне получить объект event?
• Как предотвратить действие по умолчанию для события (например, нажатие на ссылку, но не навигация)
• Почему this постоянно указывает на объект window?
• (события мыши мыши) Каковы координаты x/y события?
• Какая кнопка мыши вызвала событие?
• Был ли это щелчок Ctrl или просто обычный клик?
• Каким элементом было инициировано событие?
• Каким будет элемент? (т.е. relatedTarget, скажем, для blur)
• Как отменить всплеск события через его родительский DOM?
• (переполнение события Re), какой элемент на самом деле получает событие сейчас? (т.е. currentTarget)
• Почему я не могу получить freaking char код из этого события keydown?
• Почему моя страница пропускает память, когда я добавляю все эти обработчики событий? Argh!
• Почему я не могу отменить эту анонимную функцию, связанную раньше?

И этот список продолжается...

Единственная веская причина, чтобы катиться в наши дни, - это обучение. И это прекрасно. Тем не менее, прочитайте PPK Введение в события браузера. Посмотрите на источник jQuery. Посмотрите Источник прототипа. Вы не пожалеете об этом.

Ответ 3

Что-то вроде этого

window.onload = (function(onload) {
    return function(event) {
        onload && onload(event);

        $(".loading-overlay .spinner").fadeOut(300),
            $(".loading-overlay").fadeOut(300);
            $("body").css({
                overflow: "auto",
                height: "auto",
                position: "relative"
            })
    }
}(window.onload));

Ответ 4

window.onload = function() {
   // ...
};