为什么在此函数中删除了事件处理程序？

Question

I'm trying to understand why event handlers need to be removed. I'm a beginner developer, and I searched all over for the answer but couldn't find the reason. I came across the code below and I see that the event handler is removed as soon as it is bound. Is it a good practice?

bindSubmitEvent: function() {
  var self = this;
  $('#submitBtn').on('click', function() {
    $(this).off('click', self.bindSubmitEvent);
    self.validateForm();

    if (self.options.valid_selection) {
      self.submitForm();
    } else {
      $('#submitRegistrationBtn').on('click', self.bindSubmitEvent);
      console.log("not valid");
    }
  });
}

Answer 1

The code you've shown does not work. this inside the inner click handler is #submitButton , therefore trying to detach the self.bindSubmitEvent from it makes no sense, as that function was never attached to it.

Also $('#submitRegistrationBtn').on('click', self.bindSubmitEvent) will cause more trouble, as two events will be attached at the next click, and the second one will be called with this (and therefore self being the #submitRegistrationBtn . That will probably cause the whole code to fail (silently).

Is it a good practice?

Non working code is not a good practice, no. Removing an event listener sometimes makes sense (eg if the form was submitted, you want the registration button to be disabled), in most cases however, it is way easier to just remove the button itself (as it serves no functionality without a listener attached).