Как правильно реализовать метод .on(), похожий на $(...).on в jQuery?

Question

Выдает ошибку $(...).on is not a function

Как правильно реализовать и исправить этот код?

$ = (s) => window.document.querySelector(s)
function on(event, callback){
    return addEventListener(event, callback);
}
$('div').on('click',function(){
  console.log(this);
});

<div>click 1</div>
<div>click 2</div>

Answer 1

$ = (s) => {
    const el = window.document.querySelector(s);
    const self = {
        on: (event, callback) => {
            el.addEventListener(event, callback);
            // Для вызова по цепочке как в jQuery
            return self;
        },
    };
    // Возвращаем объект, содержащий метод `on`
    return self;
}

$('div').on('click', (e) => {
    console.log(e);
});

UPD

$ = (s) => {
    const el = window.document.querySelector(s);
    el.on = (event, callback) => {
        el.addEventListener(event, callback);
        // Для вызова по цепочке как в jQuery
        return el;
    };
    // Возвращаем элемент, содержащий метод `on`
    return el;
}

$('div').on('click', (e) => {
    console.log(e);
});

Answer 2

В дополнение:

window.$ = function(selector) {
  if (selector === document) {
    return new jQueryWrap([document]);  
  }
  
  /***/ 
  var elems = document.querySelectorAll(selector);  
  return new jQueryWrap(elems);
}

/***/
function jQueryWrap(elems) {
  for (var i = 0; i < elems.length; i++) {
    this[i] = elems[i];
  }
  
  this.length = elems.length;
}

jQueryWrap.prototype.on = function(event, target, fn) {
  // Если все аргументы на месте - запускаем делегирование:

  if (arguments.length == 3) {
    this._delegate(event, target, fn);
    return this;
  }

  // Иначе, считаем, что второй аргумент - функция.
  fn = target;
  
  for (var i = 0; i < this.length; i++) {
    this[i].addEventListener(event, fn);
  }
  
  return this;
};

jQueryWrap.prototype._delegate = function(event, selector, fn) {

  for (var i = 0; i < this.length; i++) {
    this[i].addEventListener(event, delegator);
  }
  
  function delegator(e) {
    if (e.target.closest(selector)) fn.call(e.target, e);
  }
  
};

/***/
$('div').on('click', function(){
  console.log(this.textContent);
});

$(document).on('click', '.x', function(){
  console.log(this.className);
});

<div class="x a">click 1</div>
<div class="x b">click 2</div>

Справки:

БЛОГ НА HUSL

Как правильно реализовать метод .on(), похожий на $(...).on в jQuery?

Ответы (2 шт):