Home / Questions / 22829
Accepted
Hoose
Asked: 2020-09-07 16:11:25 +0800 CST 2020-09-07 16:11:25 +0800 CST

В чем разница между on.clickи click?

  • 772

Ну и в чем разница между этими двумя методами? Это семантически то же самое или это влияет на что-то?

$('#demo').on('click', function() {
  alert('Click con on.click');
});

$('#demo2').click(function() {
  alert('Click con click');
});
#demo{
  background-color:#F2F2F2;
  width:500px;
  height:100px;
  text-align:center;
  vertical-align: middle;
  display:table-cell;
  cursor:pointer;
}

#demo2{
  background-color:#E6E6E6;
  width:500px;
  height:100px;
  text-align:center;
  vertical-align: middle;
  display:table-cell;
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo">Click con on.click</div>
<div id="demo2">Click con click</div>

jquery

2 Answers

  1. Best Answer

    Возможно, самое важное отличие состоит в том, что он .on('click', selector, function(){})позволяет вам работать с элементами, добавленными после загрузки DOM, а .click(function(){})здесь нет.

    $('#test1').on('click', '.demoOnClick',function() {                  
  console.log('Click con on.click');
});

$('.demoClick').click(function() {
  console.log('Click con click');
});

$('#crearBoton').click(function() {
  $('#test1').append('<div class="demoOnClick">Clic para On.click</div><div class="demoClick">Clic para .click</div>');
});
    #crearBoton {
  border: solid 1px;
  cursor: pointer;
  width: 100px;
}

.demoOnClick {
  border: solid 1px blue;
  margin: 5px;
  padding: 5px;
}

.demoClick {
  border: solid 1px red;
  margin: 5px;
  padding: 5px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
  
  </div>
<div id="crearBoton">Clic aqui</div>

    Другие отличия:

    • .on()создает единый обработчик для всех элементов, включенных в селектор, при этом .click()создавая обработчик для каждого из этих элементов.
    • on()позволяет использовать пространства имен.
    • 16

  2. Хочу добавить кое-что по этой теме. Этот метод .onпозволяет делегировать события, но его также можно использовать listenerнапрямую, изменив синтаксис.

    Суть в том, чтобы предоставить ему селектор в вызове. Так:

    $(document).on('click', myEventHandler)вы услышите все щелчки всего документа.

    $('#myElement').on('click', myEventHandler)он будет прослушивать все клики от всех потомков myElement (и самого себя).

    $('#myElement').on('click', '.mySelector', myEventHandler)то, что он делает, то же самое, что и выше, но затем он фильтрует .mySelectorперед вызовом myEventHandler.

    Итак: $('#myElement').on('click', myEventHandler)это точно так же, как

    $('#myElement').click(myEventHandler)

    Причина, по которой on«позволяет работать с элементами, добавленными после загрузки DOM», заключается в том, что на самом деле listenerдля этого события объявлено в элементе более низкого уровня, который его охватывает.

    Яснее:

    $('#myDIV').on('click', 'button', myEventHandler)

    На самом деле тот, который получает событие, listenerобъявлен для , затем он фильтрует все содержащиеся в нем элементы myDIVс помощью селектора .button

    Вот почему добавление к нему нового элемента кнопки myDIVреагирует на событие click.

    Легкий! ;)

    Повседневный пример. Когда мы используем компонент некоторых framework, таких как a alertof Bootstrap. Мы видим, что при динамическом добавлении оповещения в DOM с data-dismiss="alert"автоматическим атрибутом кнопка закрытия вызывает закрытие оповещения без необходимости прикреплять файл listener. Это потому, что внутри библиотека Bootstrap js делает следующее:

    $(document).on('click', '[data-dismiss="alert"]', myHandler).

    Затем myHandlerон выполняет ближайший dismissэлемент класса (метод ) и т. д.alertjQuery.closest

    Как jQueryопределить, какая кнопка оповещения была нажата? Благодаря event bubbling... Несмотря на то, что listenerбыло установлено для корневого элемента ( document), событие фактически clickпроизошло на кнопке оповещения и работало вниз, пока не получило его document. Затем он jQueryотфильтровал все alertsи вызвал handlerметод, applyпередав javascriptв качестве параметра элемент, вызвавший событие ( button).

    Когда мы используем $(document).on('click', 'button.myClass', myHandler) jQueryто, что он делает внутри, это document.addEventListener('click', myHandler, false).

    Таким образом, он захватывает clicksвсе объекты на странице, а затем выполняет dispatchto object button.myClass.

    • 1