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

Question

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

Navigation

#1 by (13 votes)

9

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

jquery

asked by anonymous 24.10.2017 / 12:37

1 answer

How to use another language that does not JavaScript in the browser? How to make DbUnit recognize the Postgresql POLYGON data type?

score 13 · Accepted 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:

$('.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><buttonclass='button'>Botao</button>

2-The.blur()methodcomesfrom'sliding',thatis,ittriggersanactionwhenthepointerexitstheselectedelement:

$('.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><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:

$(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><buttonclass='add-botao'>AddBotão</button><divclass='botoes'></div>

Exampleof.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><tableborder='1'><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>