Как создать более короткий эквивалент для addEventListener - PullRequest
Новая
       31

Как создать более короткий эквивалент для addEventListener

0 голосов
/ 18 мая 2018

Я хочу создать короткую функцию для addEvenTListener, как это делает jQuery.У меня есть отдельные функции для выбора и прослушивания событий.Но я хочу иметь возможность использовать $(selector).on вместо on(event, elem, callback, capture).Как мне этого добиться? 

function $ (selector, scope) {
    scope = scope ? scope : document;
    return   scope.querySelector(selector);
};

var on = function (event, elem, callback, capture) {

    if (typeof (elem) === 'function') {
        capture = callback;
        callback = elem;
        elem = window;
    }
    capture = capture ? true : false;
    elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
    if (!elem) return;
    elem.addEventListener(event, callback, capture);
};

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

JQuery возвращает массив элементов, обернутых в объект jQuery, который предоставляет полезные методы в своем прототипе.Итак, упрощенно, он работает аналогично приведенному ниже коду.Последняя строка - это способ, которым вы хотите присоединить слушатели событий к элементам (если я правильно понимаю). 

function $(selector, scope){
  let z = Object.create($.prototype);
  z.e = (scope || document).querySelector(selector);
  return z;
}

$.prototype.on = function(event, callback, capture){
  return this.e.addEventListener(event, callback, capture);
}

$("button").on("click", ()=>console.log("Clicked!"));
<button>Click</button>
0 голосов
/ 18 мая 2018

jQuery возвращает объект-оболочку, который предоставляет методы .on(), .attr(), .prop() и т. Д. Вместо действительного экземпляра HTMLElement.Таким образом, один из способов сделать это - сделать то же самое.

Другой, технически выполнимый способ - изменить прототип класса HTMLElement: 

HTMLElement.prototype.on = function(event, callback, capture) { ... };

Обратите внимание, однако, что манипулирование прототипами, которые вы не создавали самостоятельно, очень не рекомендуется .Он может легко нарушить предопределенное поведение, возможно, не сейчас, а в будущих версиях JavaScript.

...