addEventListener() без getElementById ссылочный успех?

Проверьте эту скрипку (частичный фрагмент кода): http://jsfiddle.net/QJJb8/addEventListener() без getElementById ссылочный успех?

<button id='mybutton'>MY BUTTON</button> 

mybutton.addEventListener('click', mybuttonClick, false); 

function mybuttonClick(e){ 
    alert(e.target.textContent+' WAS CLICKED!'); 
}

Обратите внимание, как я не использую getElementById(), чтобы получить ссылку на эту кнопку. Почему он все еще работает? (Протестировано в Firefox, Chrome и IE9 & 10.)

Является ли это плохой практикой/причудой или встроена функция для элементов кнопки? Если последний, это потрясающий перк/ярлык при использовании элементов кнопки! Или, возможно, я все время использовал метод getElementById()?

// ANSWER UPDATE //////////////////////////////////////// ////////////////////////////

После некоторых исследований кажется, что описанное выше поведение фактически является частью спецификации HTML5. В дополнении к ответу RobG в поле ниже, смотрите также следующие ссылки для большего понимания:

http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/

https://stackoverflow.com/a/3434388/2434324 (ссылка предоставленного yoelp)

http://jsperf.com/named-access-on-the-window-object

источник

2013-05-29 calipoop

Он работает потому что вы получаете ссылку на кнопку непосредственно из прослушивателя событий щелчка (например, параметр «e»), который вы используете для отображения текста кнопки –

@ FilipposKarapetis, но не для добавления слушателя. – RobG

@FilipposKarapetis - на самом деле, мой конкретный вопрос до того, как он даже дойдет до слушателя событий «e» - почему функция работает в первую очередь? Примечание. Mybutton не объявляется нигде. Он указан в идентификаторе HTML, а затем прямо ссылается: mybutton.addEventListener (без getElementById). – calipoop

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

Однако IE захватил около 95% рынка браузеров, и разработчики разработали для прихожей IE, поэтому другие браузеры реализовали одно и то же поведение, но не рекламировали его (то же самое с поддержкой document.all). Итак, теперь все браузеры делают это, но (почти) никто его не использует.

исключением случаев, когда кто-то спотыкается через это ...

Так где у вас есть:

<button id='mybutton' ...>

браузеры создают глобальную MyButton переменную, которая ссылается на элемент.

источник

2013-05-29 22:31:47 RobG

интересно - так это плохая практика? Кажется, такой отличный ярлык для такого длинного document.getElementById() селектора. Я думаю, если нет спецификации для этого, я, вероятно, лучше не использовать его для будущей проверки ... bummer? – calipoop

Я уверен, что это были оригинальные разработчики. Но действительно ли вы хотите, чтобы каждый * ID элемента и имя были глобальной переменной? Это значительно расширяет возможности для коллизий имен.Кроме того, объявленные глобальные переменные имеют приоритет над идентификаторами и именами элементов, поэтому все может запутаться. – RobG

Да, возможно, не _every_ element ID ... но для элементов кнопки, где вам почти всегда понадобится ref ... mighta было удобно! В любом случае, я буду придерживаться метода OG getElementById, пока не услышу о дополнении спецификации ... Еще раз спасибо. – calipoop

Это работает на всех элементах DOM, а не только кнопки, его, вероятно, плохая практика, так как любой из может изменить MyButton к чему-то еще (то есть. mybutton = "BLABLA"), то ваш код ломает

также см this

источник

2013-05-29 22:39:54 yoelp

Спасибо за информацию и ссылку yoelp - очень полезно – calipoop

addEventListener() без getElementById ссылочный успех?

ответ

Смежные вопросы