События JS addEventListener

Question

в JS не набрался еще опыта, не судите строго за глупый вопрос, но можно ли создать клас или функцию, которая будет принимать парамеры id и добавлять им addEventListener , чтобы минимизировать код по правилу - не повторять - потому что у меня на сайте таких строчек сотня и возможно я могу создать клас или функцию, чтобы упростить для меня создание будущих таких addEventListener

Как такие обработчики создают разработчики с опытом, если нет другого варианта, только как я прописал, прошу не хейтить за глупый вопрос :)

<button id="one">"первый"</button>
<button id="two">"второй"</button>
<button id="three">"третий"</button>

 let divOne = document.getElementById('one');
 let divTwo = document.getElementById('two');
 let divThree = document.getElementById('three');



divOne.addEventListener('click', foo1, false);
divTwo.addEventListener('click', foo2, false);
divThree.addEventListener('click', foo3, false);

  function foo1() { console.log('1'); }
  function foo2() {  console.log('2'); }
  function foo3() {  console.log('3'); }

Answer 1

let bttns = document.querySelectorAll('button');

for(let bttn of bttns) {
 bttn.onclick = () => {console.log(bttn.id) };
}

<button id="one">"первый"</button>
<button id="two">"второй"</button>
<button id="three">"третий"</button>

Answer 2

Если функции отличаются только номером, то можно собрать все кнопки в массив, пройтись по нему в цикле и навесить на каждую addEventListener:

function foo1() { console.log('1'); }
function foo2() { console.log('2'); }
function foo3() { console.log('3'); }

const arr = document.querySelectorAll('button');
arr.forEach(function(elem, i){
  elem.addEventListener('click', eval('foo'+(i+1)), false);
})

<button id="one">"первый"</button>
<button id="two">"второй"</button>
<button id="three">"третий"</button>

Answer 3

...просто чтобы постоянно не писать let divOne = document.getElementById('one'); ...

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

let _o = new lib();

_o.on('mouseenter', '#one', function() {
  console.log(1);
});
_o.on('click', '#two', function() {
  console.log(2);
});

_o.id('three').addEventListener('click', function() {
  console.log(3);
});

/***/

_o.click('.bubu', function() {
  console.log(this.textContent);
});

/*****/

function lib() {
  this.id = function(str){ return document.getElementById(str); };

  this.on = function(event, selector, func) {
    var elems = document.querySelectorAll(selector);
    /* Можно конечно заменить и на getElementById (будет быстрее), просто так универсальнее */
    for (var i = 0; i < elems.length; i++) {
      elems[i].addEventListener(event, func);
    }
  }; /* Здесь точки-запятые важны, т.к. `function expression` */
  
  this.click = function(selector, func) {
    var elems = document.querySelectorAll(selector);
    for (var i = 0; i < elems.length; i++) {
      elems[i].addEventListener('click', func);
    }
  };
}

<button id="one">"первый"</button>
<button id="two">"второй"</button>
<button id="three">"третий"</button>
<hr>
<button class="bubu">1</button>
<button class="bubu">2</button>
<button class="bubu">3</button>

Answer 4

Если вам необходимо только вешать события, то проще всего использовать пару небольшых функций:

/*********************
 *** any addEventListener
 * @param elements  - Dom elements or window, or css selector
 * @param {string} event - Event type
 * @param {function} callback - Execute function when triggered event
 * @returns {Element}
 *********************/
export const createEvent = (elements, event, callback) => {
    elements = getElements(elements);
    if (elements) {
        elements.forEach((item) => {
            return item.addEventListener(event, callback, false);
        });
    }
};

/*********************
 *** Check parameter on string or DOM object/objects and return Array of object or false is not find element on page
 * @param {string | Element | NodeList | Document | Window} parameter. 
 * @returns {boolean | Array}
 *********************/
export const getElements = (parameter) => {
    if ((typeof parameter === "string" && typeof parameter !== "object") || parameter.constructor === String) {
        try {
            if (document.querySelectorAll(parameter).length > 0) {
                return Array.from(document.querySelectorAll(parameter));
            } else {
                return false;
            }
        } catch(e) {
            console.warn(e);
            return false
        }
    } else {
        if (parameter.constructor === NodeList) {
            return Array.from(parameter);
        } else {
            return Array.from([parameter]);
        }
    }
};

Use:

createEvent('.any-css-selector', 'click/mouseover/input...', function(e){
    console.log(this, e);
});
let element = document.querySelector('*');
createEvent(element, 'click/mouseover/input...', function(e){
    console.log(this, e);
});

P.S. Если не используете сборщики, сотрите ключевые слова "export". И const перепешите на var

БЛОГ НА HUSL

События JS addEventListener

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