Differences between event definitions

Asked

Viewed 82 times

4

Examples

1.

<button onclick="clickTeste()">Teste</button>

function clickTeste() {
    alert("click");
}

2. (the most commonly used)

$("#testeid").click(function() {
    alert("click");
});

3.

$(document).ready(function() {
    $(document).on("click","#testeid",function() {
        alert("click");
    });
});
  • What advantages/disadvantages do you have in each of them?
  • There are more forms of definition than these?
jquery

  • Does your question concern only what is done via jQuery? And is there some special reason for example 3 to have Document.ready and 2 to not have?

  • @bfavaretto Yes, it would be specific to jQuery. About the document.ready, from what I’ve been reading, there are reports that using the .on without being in .ready, there were cases that didn’t work. So I was even more in doubt... Until then, I think the 2nd is the most used, because it eliminates the need to set attribute in HTML, and the use of .ready.

  • I marked it as duplicate because there’s a lot of question on the subject here. Your example 1 doesn’t have jQuery, so the links don’t deal with it (there are other questions on the site they deal with). The last 2 links are about the issue of Document.ready, which would be a question apart.

  • @bfavaretto Thanks, I’ll take a look!

2 answers

0

Basically the 3 methods will perform the same action. Using Javascript or Jquery really depends on the needs of the project to be developed. Using Jquery makes the development process more agile to complete. If you need to develop something in javascript that can not take long to be released, surely jquery can be exploited. Anyway, you will be using great technologies to develop your applications.

0

Calling him that way .click(function(){}) you’re wearing a shortcut for the call .on('click',function(){}).

Already calling him without passing a function, ie this way .click() you’re making a shortcut for the call .trigger('click').

This is the way to define the event via HTML <button onclick="clickTeste()">

.on(type,listener) this method accepted beyond the event click,change and all other events of html, it also accepts customized events.
Example: modal opening event of bootstrap, .on('show.bs.modal',function(){})

There is still the

<HTMLElement>.onclick=function(){} in this you are adding an event to the element directly, using this way you will only be able to keep an event in the element and to remove the event just put the value to null or an empty function.

<HTMLElement>.addEventListener(type,listener[, options]) already this form is very similar to jquery you can put n events and to remove you have to call the <HTMLElement>.removeEventListener(type, listener[, useCapture]). I believe that the jQuery.on, jQuery.off make use of these events.

I may be wrong but I don’t think there’s an advantage/disadvantage between .click(function(){}) and .on('click',function(){}) in this way, I think it’s just a matter of practicality and standardization.

jquery.click, jquery.on( type [, selector ] [, data ], listener )

  • 2

    But Icaro, what is the advantage and disadvantage of each? Mere "organization" of the code? Why do most I see, use .click(function(){}) and not using the attribute in HTML? Or pq, use the ready? It would bring me a security that the whole document was loaded before performing any action!? I would like more details please... But thank you for the answer!

Browser other questions tagged jquery

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