3

Выдает ошибку $(...).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>

6
  • версия jQuery какая?
    – ioprst
    Commented 1 апр. 2021 в 4:52
  • @ioprst, здесь нет jquery
    – Squeli47
    Commented 1 апр. 2021 в 4:54
  • действительно, не заметил определение функции, пардон
    – ioprst
    Commented 1 апр. 2021 в 4:55
  • 1
    querySelector вернет элемент, разве он имеет метод on? Вы же вызываете метод on элемента, а не собственную функцию.
    – ioprst
    Commented 1 апр. 2021 в 4:58
  • Во-первых - метод on не включен в элемент. Во-вторых - addEventListener вешается на определенный элемент Commented 1 апр. 2021 в 5:00

2 ответа 2

5
$ = (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);
});
4
  • А как можно вернуть el? Если к примеру вызывать другие методы, например $('div').classList.add('show'); внутри там где console.log(e);
    – Squeli47
    Commented 1 апр. 2021 в 5:55
  • @Squeli47, дополнил ответ Commented 1 апр. 2021 в 9:06
  • Спасибо большое, работает! только маленькую опечатку }, заменить на }
    – Squeli47
    Commented 1 апр. 2021 в 9:21
  • @Squeli47, поправил Commented 1 апр. 2021 в 9:36
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>

Справки:

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.