Дополнительный короткий путь для addEventListener ()

Возможный Дубликат:
Каково различие использования addEventListener?

Я заметил, что события могут быть назначены непосредственно на объектах, не имея необходимость использовать addEventListener:

document.onload = function(e){
 //do stuff..
};

вместо:

document.addEventListener('load', function(e){
 //do stuff..
});

Так есть ли какая-либо причина, я не должен использовать первый метод? Почему другие люди не используют его?

Также это, кажется, работает в старом IE также (в котором вам был нужен attachEvent).

1
nl ja de
Я рекомендую читать quirksmode.org/js/introevents.html (и связанный) страницы, который объясняет все за и против и причуды различных способов приложить обработчики событий.
добавлено автор Felix Kling, источник
Можно только приложить одного слушателя первый путь, секунда изменения первое.
добавлено автор Paul S., источник

2 ответы

Рассмотрите то, что происходит, если вы пробуете следующее (я прилагаю события, чтобы окно , потому что это - то, где необходимо прислушаться к этому событию),

window.onload = function (e) {console.log('A');};
window.onload = function (e) {console.log('B');};

против

window.addEventListener('load', function (e) {console.log('C');}, false);
window.addEventListener('load', function (e) {console.log('D');}, false);

От первого кодового блока вы будете только видеть "B" , но от второго вы будете видеть оба "C" и "D" . Скрипка (пожалуйста, откройте пульт, чтобы видеть).

3
добавлено

Apart from the fact that, as the accepted answer shows, directly binding handlers to the DOM limits the amout of handlers, addEventListener has a lot more to offer:
The event listener needn't be bound to the element directly (it doesn't have to exist in the DOM). This is useful when using ajax (think of it as jQuery's .on method).
A single listener can deal with all events of a particular type, so using event listeners requires less resources (which can speed up the overall performance)
For X-browser compatibility (like IE8), it's a lot easier to avoid memory-leaks:

window.onload = function(e)
{
    alert('In IE8, this causes mem-leaks!');
};


var load = function(e)
{//cf @PaulS.'s comment & link on IE8 and symbol bleeding
    e = e || window.event;//X-browser stuff
    var target = e.target || e.srcElement;//so you can use this callback for all browsers
    if (window.removeEventListener)
    {//more X-browser stuff
        return window.removeEventListener('load',load,false);
    }
    window.detachEvent('onload',load);//reference callback by variable name
};
if (window.addEventListener)
{
    window.addEventListener('load',load,false);
}
else
{//in IE8, addEventListener doesn't exist, but it has a jScript counterpart:
    //no mem-leaks in IE AFAIK
    window.attachEvent('onload', load);
}

Вот несколько связей, которые могли бы заинтересовать вас (Да, я знаю, бесстыдная самореклама - жаль):

Why do we need event listeners?
mem-leaks & event delegation & closures in IE8

И только для забавы: сценарий я написал некоторое время назад, что делегация использования событий и работы над IE, FF, хромом... и касаются устройств. Который был немного более хитрым, чем я ожидал.

/**
* Copyright 2012, Elias Van Ootegem
* Date: Tue Jul 03 2012 +0100
*/
(function(G,undef)
{
    'use strict';
    var load,clickHandler,touchHandler,hide,reveal;
    hide = function(elem)
    {
        elem.setAttribute('style','display:none;');
    };
    reveal = function(show,nextTo)
    {
        var str = 'display: block; position:relative; left:220px; top: ' + (nextTo.offsetTop - show.parentNode.offsetTop) + 'px;';
        show.setAttribute('style',str);
    }
    load = function()
    {
        var doc = G.document;
        if (G.removeEventListener)
        {
            G.removeEventListener('load',load,false);
        }
        else
        {
            G.detachEvent('onload',load);
        }
        if (doc.hasOwnProperty('ontouchstart'))
        {//We have a touch device
            touchHandler = (function(subNavs)
            {
                var current,divs = (function()
                {
                    var i,r = {};
                    for (i=0;i
3
добавлено
+1 для хорошего объема информации, но you' ve не учел это IE8- bleeds named function expressions который вы используете всюду по своему ответу.
добавлено автор Paul S., источник
@PaulS.: Право вы... Поскольку вы видите в последнем отрывке, I' ve, взятый к тому, чтобы поручать анонимные функции к локальным переменным избежать любых проблем thay, мог бы произойти ( вар loadCB = функция() {}; window.attachEvent (' onload' loadCB); ). Спасибо за предостережение:)
добавлено автор Elias Van Ootegem, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском