What is the difference between the following ways of using the jQuery ON and OFF methods

Asked

Viewed 188 times

6

1 - I used to use this way:

$(document).off('evento', 'elemento', nomeFuncao);
$(document).on('evento', 'elemento', nomeFuncao);

2 - But recently I used it and it worked the same way.

$(document).off().on('evento', 'elemento', function() {});

In the second example I did not use any type of identifier for the off method. But it still removed only the correct event from the obj Document.

I would like to know if the second form of use is correct as well. Or if it is a bad practice?

jquery

  • Off I don’t know and never used, and I use On is a Bind. Example $('div#botao').on('click', function() { alert(1); }); or $('div#botao').bind('click', function() { alert(2); }); ... see test: http://codepen.io/KingRider/pen/OXoVVB

  • Yes. But starting with version 1.7 of jQuery he recommends using the ON method to add event handlers to Document. The BIND method should only be used in summers prior to 1.7 of jQuery. Reference: http://api.jquery.com/bind/

  • I understand, and I researched off() is equal unbind(), but has problem its previous version? and why does not use pure javascript rss

  • From what I read in the documentation. bind() and unbind() were replaced by on and off methods starting with jQuery version 1.7. As for why I didn’t do it with pure javascript, it’s because I don’t know how to do the same thing with pure javascript. I find it very practical and simple with jQuery. But if you think it’s simpler with javascript, I’d be happy if you could show me an example. ;)

  • Vish! I used javascript Pure until angular more practical kkkk, bind equals pure javascript addeventlistener, nothing easy and various type of element and object.

2 answers

5

Yes, the second form is correct, according to the documentation. She removes all the listeners events that have been added with on - in the case of your example, all listeners of the document will be removed.

1


The .off() is mainly used to prevent duplication of the same action, see the example, SEM .off():

function button(e){

  if($(e).hasClass('comOff')){
    $(e).off();
  }
  
  $(e).on('click', function() {
        button($(this));
        alert($(this).text());
  });

}


button('.semOff');
button('.comOff');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="semOff">SEM OFF</button>
<br>
<hr>
<button class="comOff">COM OFF</button>

In this example, which is not one of the best, when you click on "NO OFF" more than once it will display more than one alert. This is because the previous action was not turned off, so another one will be added. When you use the .off() you will remove any .on() that was previously added.

When you use: $(document).off(), means that ALL .on() applied in the document will be removed when you specify $(document).off('evento', 'elemento', nomeFuncao); you just that will be removed!

That’s the difference.

I particularly prefer to use $('div button.salvar').on('click', [...]) for example, instead of using the document.

  • I don’t know for sure if there is any difference between adding to Document or directly to the element. But I used it as follows: $(Document). off('change', '#module'). on('change', '#module', Function() { //code }); and it removes only the event delegated to the id module. Keeping all the other events I had added. So I guess it makes no difference to add it to the Document or element. I’ll dig deeper and see if there’s any difference!

Browser other questions tagged jquery

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