Вопрос по event-delegation, events, jquery, javascript – Делегирование событий в jQuery, как это сделать?

0

В JavaScript я использовал делегирование событий следующим образом:

someDiv.addEventListener('click', function(evt){
    if(evt.target.id == "#someChild"){
       // Do something..
    } else if(evt.target.id == "#anotherChild"){
       // Do something else..
    }
}, false);

Что эквивалентно этому в jQuery? я знаю о.on() но как использовать его в делегировании событий? Я имею в виду, как это делается:

someDiv.on('click, '#someChild, #anotherChild", function(evt){
      if($(this).is("#someChild")){ 
           // Do something..
      } else if($(this).is("#anotherChild")){
           // Do something else ..
      }      
});

Но разве это не будет так же, как в обычном JavaScript? Я хочу знать, есть ли лучший способ добиться этого. И если это единственный путь, в чем преимущество jQuery перед JS?

Ну, для одного,addEventListener не работает в IE ниже IE9. j08691

Ваш Ответ

3   ответа
1

С jQuery вы бы делали это так:

function onButtonClick(e) {
  //this = the button that was clicked

}

$(document.body).on('click','button',onButtonClick)

Вы можете прочитать документыВот

1

Ты можешь сделать:

$(someDiv).on('click', '#someChild, #anotherChild', function(){
    if(this.id ==='someChild'){ 
       // Do something..
    } else if(this.id === 'anotherChild'){
       // Do something else ..
    }      
});

Или создайте два обработчика событий, если вы все равно делаете разные вещи для обоих элементов:

$(someDiv).on('click', '#someChild', function(){
     // Do something..    
}).on('click', '#anotherChild', function() {
     // Do something else ..
});

But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?

Конечно, это в основном то же самое, jQuery просто делает вашу жизнь немного проще, предоставляя оболочку для DOM API, но это не меняет работу DOM.

Хотя есть разница, а именноthis будет ссылаться на элемент, соответствующий селектору, а не на элемент, с которым связан обработчик.

В целом, преимущество заключается в том, что код jQuery более совместим с различными браузерами, чем при использованииaddEventListener.

1

Вы можете начать здесь, если этот элемент создается динамически, а не при загрузке страницы

$(document).on('click', '#someChild', function(evt) {
   // Do something..      
}); 

Если элемент создан до отображения страницы, это будет работать

         <input type="button" onclick="fnClickfn();" id="xxx" />

РЕДАКТИРОВАТЬ:

О, тоже.on работает только в более поздних версиях на jQuery (я думаю, 1.6 и выше), поэтому убедитесь, что вы не используете старую версию, которая потребует.live а также.die.

Вы можете заменить $ (document) на что-либо, что является родительским элементом для динамически создаваемого div, но родительский не может быть создан динамически, поэтому документ обычно работает

Похожие вопросы