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

What is the difference between on.click and click?

  • 772

Well, what is the difference between the two methods? Is it semantically the same or does it affect something?

$('#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

    Perhaps the most important difference is that it .on('click', selector, function(){})allows you to work with elements added after the DOM has been loaded, whereas .click(function(){})this does not.

    $('#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>

    Other differences:

    • .on()creates a single handler for all the elements included in the selector, while .click()creating a handler for each of these elements.
    • on()allows the use of namespaces.
    • 16

  2. I would like to add something regarding this topic. The method .onallows delegation of events, but can also be used listenerdirectly by varying the syntax.

    The point is to provide it with a selector in the call. So:

    $(document).on('click', myEventHandler)you will hear all the clicks of the entire document.

    $('#myElement').on('click', myEventHandler)it will listen for all clicks from all descendants of myElement (and itself).

    $('#myElement').on('click', '.mySelector', myEventHandler)what it does is the same as above but then it filters by .mySelectorbefore calling myEventHandler.

    So: $('#myElement').on('click', myEventHandler)it is exactly the same as

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

    The reason that on"allows to work with elements added after the DOM has been loaded" is that there is actually a listenerfor that event declared in a lower level element that is encompassing it.

    More clear:

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

    Actually the one that is receiving the event is the one listenerdeclared for , then it filters all the elements it contains myDIVby selector .button

    That's why adding a new button element to myDIVit reacts to the event click.

    Easy! ;)

    An everyday example. When we use a component of some frameworksuch as a alertof Bootstrap. We see that by dynamically adding the alert to the DOM with the data-dismiss="alert"automatically attribute, the close button causes the alert to close without the need to attach a listener. That's because internally the Bootstrap js library what it does is:

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

    Then myHandlerit does the of the closest dismissclass element (method ), etc.alertjQuery.closest

    How do you jQueryidentify which alert button was clicked on? Thanks to the event bubbling... Even though the listenerwas set on the root element ( document), the event actually clickoccurred on the alert button and worked its way down until it received it document. Then it jQueryfiltered all the alertsand called handlerthrough the method applyand javascriptpassing as a parameter the element that originated the event (the button).

    When we use $(document).on('click', 'button.myClass', myHandler) jQuerywhat it does internally it is document.addEventListener('click', myHandler, false).

    So it captures all clicksof all the objects on the page and then does the dispatchto object button.myClass.

    • 1