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

Asked

Viewed 5,204 times

10

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

Note: I know you have, I’m not saying you don’t have, if someone in a didactic way can answer with some examples with code would be quite cool.

jquery

  • Your question is the same as this https://answall.com/a/5199/129 ?

  • No no, Sergio. There are a few more things I wanted to know in mine, but thank you!

  • Can you explain the differences of this question in relation to the other to be clear?

  • In this case I wanted to know the difference between all these events, not just between the click and the on. Put arrived in a part of the course here that the boy began to use these events, but told us to look on the internet because he would not go into too much, being that the course is of PHP. In case you were wondering.

  • You want to know the explanation of each of these events?

1 answer

14


There are many triggers for jQuery, here is a brief explanation:

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

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

2 - The method .blur() comes from the 'slip', meaning it triggers an action when the pointer leaves the selected element:

Note: to fire type something in input and press the key Tab.

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

3 - Ja o .bind() and the .on() are not the event by itself, they are Event handlers, or in English, event handlers, its function is to verify whether an event has been triggered. The difference between the two is that the method .bind() became obsolete in version 3.0 of jQuery, being recommended the use of the method .on(), which also allows access to elements that were not in the GIFT original, still exist the methods handlers .live(), which is also obsolete so I will not explain, and the method .delegate(), that although it is also obsolete (for version 3.0), I think it is nice to explain, as it allows you to navigate from a chosen element, not only from the document, gaining performance in an action.

Follow example of the method .on():

$(document).on('click','.add-botao',function(){
$('.botoes').append('<button class="alertar">Borão gerado via js</button>');
})

$(document).on('click','.alertar',function(){
   alert('botão gerado via js clicado');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='add-botao'>Add Botão</button>
<div class='botoes'></div>

Example of .delegate():

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

There are a number of jQuery events that do specific actions, following the list of the ones I use most:

  • .change() => Triggers when element value changes.

  • .contextmenu() => Fires by right-clicking the mouse.

  • .mouseover() => Fires when mouse passes over selected element.

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

It follows official documentation of Events, because there are many to describe in a single answer:

OBS: The method .on allows you to navigate from a specific element, as well as the delegate, for this reason the .bind() and .delegate() were discontinued.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.