What is the difference between .on (), .click (), .blur (), bind ()?


And if there is any more, what would it be? And the difference of this "some more" to the others above.

asked by anonymous 24.10.2017 / 12:37

1 answer


There are many triggers for jQuery, here's a quick explanation:

1 - The .click() method is the name itself, it will trigger an action when there is a click 'in some element entered in the selector:

alert('O botão foi clicado');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass='button'>Botao</button>


alert('O foco saiu do input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputclass='input'type='text'>

3-Ja.bind()and.on()arenottheeventbythemselves,theyareeventhandlers,orinPortuguese,eventhandlers,theirfunctionistocheckifaneventwasfired.Thedifferencebetweenthetwoisthatthemethod .bind() has become obsolete in jQuery version 3.0, being recommended to use the method .on() , which also allows you to access elements that were not in the original DOM , there are still handlers in> .live() , which is also obsolete then I will not explain, and the .delegate() method, which although it is also obsolete (for version 3.0), I think it is legal to explain, since it allows navigating from a chosen element, not only of the document, gaining performance in an action.

Here is an example of the .on() method:

$('.botoes').append('<button class="alertar">Borão gerado via js</button>');

   alert('botão gerado via js clicado');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass='add-botao'>AddBotão</button><divclass='botoes'></div>


$( "table" ).delegate( "td", "click", function() {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder='1'><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>


  • .change() = > It fires when the value of the element changes.

  • .contextmenu() = > Shoot when you right-click.

  • .mouseover() = > It fires when the mouse passes over the selected element.

  • .ready() = > It fires when the selected element is ready.

NOTE: The .on method allows you to navigate from a specific element, as well as delegate , so the .bind() and .delegate() method has been deprecated.

24.10.2017 / 12:54