Хочу поделиться примером простой реализации методов, аналогичных методам on и off из библиотеки JQuery, специально для тех, кто хочет работать с чистым JavaScript, но не готов сразу отказаться от сформировавшихся привычек.

Для начала следует вспомнить предназначение рассматриваемых методов JQuery:

• on – используется для добавления обработчика события элемента;
• off – используется для удаления обработчика события элемента.

Прочитать подробнее об использовании методов можно в официальной документации JQuery: on и off.

Отказываясь от использования JQuery и переходя на чистый JavaScript, вместо метода on следует использовать метод addEventListener, а вместо метода off – метод removeEventListener. Однако следующий код позволяет сохранить привычный каждому любителю JQuery синтаксис, не подключая саму библиотеку:

<script>
  var $ = document.querySelectorAll.bind(document);
  Element.prototype.on = Element.prototype.addEventListener;
  Element.prototype.off = Element.prototype.removeEventListener;
</script>

В приведённом коде, приятным дополнением к рассматриваемой теме является объявление переменной $, используя которую, можно обращаться к элементам DOM, сохраняя привычный синтаксис JQuery, что продемонстрировано в следующем примере.

<div>
  <button class="button-1">Кнопка 1</button>
  <button class="button-2">Кнопка 2</button>
</div>

<script>
  function clickButton1() {
    alert('Нажата Кнопка 1');
  }
  
  function clickButton2() {
    alert('Нажата Кнопка 2. Кнопка 1 больше не работает');
    $('.button-1')[0].off('click', clickButton1);
  }
            
  $('.button-1')[0].on('click', clickButton1);
  $('.button-2')[0].on('click', clickButton2);
</script>

Использование рассмотренной техники может найти применение на практике, но может рассматриваться и просто в качестве первоапрельского розыгрыша.