привязка события к элементу в JavaScript

Question

Обычно, когда я хочу привязать какое-либо событие к элементу, я буду привязывать событие к элементу напрямую. Например, я хочу привязать событие click к элементу "li":

<ul id="ul_list">
  <li class="t">xxxx</li>
  <li class="t">xxxx</li>
  .....
</ul>

var lis=document.getElementById("ul_list").children();
for(var i=0;i<lis.length;i++){
  lis[i].onclick=function(){
    console.info(this.innerHTML);
  }
}

Работает.

Но в некоторых открытых исходных кодах люди предпочитают связывать событие с родительским элементом:

document.onclick=function(e){
 e=e==null?:window.event:e;
 var target=e.target; //the browser is not considered here
 if(target.className=='t' && target.localName='LI'){
  console.info(target.innerHTML);
 }
}

Интересно, что лучше?

Кроме того, при обработке событий перетаскивания люди связывают событие mousemove со всем документом. Почему?

Answer 1

люди предпочитают связывать событие с родительским элементом

Это упоминается как делегирование события и особенно полезно, когда вы хотите запустить один и тот же обработчик событий для нескольких элементов. Вместо привязки обработчика события к каждому из этих элементов, вы привязываете его к общему предку, а затем проверяете, из какого элемента произошло событие. Это работает, потому что события всплывают в DOM-дереве .

Интересно, что лучше?

Это зависит, оба подхода имеют свои плюсы и минусы.

Делегирование события может быть медленнее, так как событие должно всплыть первым. Вам также может потребоваться выполнить обход DOM, поскольку событие может не возникать в элементе, для которого вы проверяете. Например, в вашем примере элементы li могут иметь других дочерних элементов, скажем, элемент a. Чтобы выяснить, является ли выбранный элемент a потомком одного из li s, вы должны пройти через предков и проверить их.

С другой стороны, непосредственное связывание обработчика происходит быстрее в том смысле, что событие обрабатывается непосредственно в элементе. Но если вы связываете много обработчиков событий и не делаете это должным образом (как в вашем примере), вы используете больше памяти, чем вам действительно нужно. Старые браузеры (я думаю, особенно IE) также могут работать хуже, если есть много обработчиков событий.

Кроме того, иногда, когда обрабатывают эффект перетаскивания, люди всегда связывают событие mousemove со всем документом, почему?

Проблема в том, что при перетаскивании элемента мышь часто перемещается на быстрее , чем элемент, и покидает его. Если вы связываете событие mousemove только с перетаскиваемым элементом, всякий раз, когда курсор покидает элемент, движение останавливается. Чтобы избежать этого, обработчик событий привязан ко всему документу (на время перетаскивания), чтобы движение было плавным.

Answer 2

Свяжите обработчики с самым конкретным возможным событием и элементом.

Обратите внимание, что (просто чтобы быть педантичным!) Вы привязываете обработчик к событию для элемента, а не «привязываете какое-либо событие к элементу».

Answer 3

В случае события click лучше привязать напрямую к затронутым элементам, без привязки ко всему - зачем вам нужно запускать функцию, когда вы щелкаете по чему-то, что совершенно не относится к вам?

Это может быть полезно, когда элементы распределены по документу и их трудно "собрать", например, когда они имеют только один и тот же класс - getElementsByClassName не очень эффективен в чистом JavaScript, так как вам нужно перебирать все элементы, поэтому в таком случае лучше всегда вызывать функцию и проверять, что было нажато.

Answer 4

Ссылка на родительский элемент означает, что вы добавляете один обработчик событий вместо нескольких. Это повышение производительности в вашем приложении! Также, если вы добавляете новые элементы на страницу, вам не нужно беспокоиться об их привязке.

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