js как добавить короткую функцию addEventListener

Question

function get(s){
    return document.querySelector(s);
}

function getAll(s){
    return document.querySelectorAll(s);
}
Node.prototype.click=function(ev){
    this.addEventListener("click",ev)
}

NodeList.prototype.click=function(ev){
    this.forEach(el=>el.addEventListener("click",ev))
}

window.onload=function(){
    get("b").click(function(){
        console.log(this)
    })

    getAll("b").click(function(){
        console.log(this)
    })
}

<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>

NodeList работает а Node почему то нет. в чем проблема?

Answer 1

В том, что у элемента уже есть функция click.

function get(s) {
  return document.querySelector(s);
}

function getAll(s) {
  return document.querySelectorAll(s);
}
Node.prototype.click1 = function(ev) {
  this.addEventListener("click", ev)
}

NodeList.prototype.click = function(ev) {
  this.forEach(el => el.addEventListener("click", ev))
}

window.onload = function() {
  console.log(get("b").click);
  
  get("b").click1(function() {
    console.log(this)
  })

  getAll("b").click(function() {
    console.log(this)
  })
}

<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>

Answer 2

Проблема в количестве уровней имплементации:

.querySelector возвращает конкретный Element

Цепочка прототипов полученного элемента выглядит так:

HtmlElement
Element
Node

При этом, непосредственно свойство click есть сразу у HtmlElement.

Таким образом, поиск до Node.prototype.click просто не доходит.

БЛОГ НА HUSL

js как добавить короткую функцию addEventListener

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