В JavaScript обработчик события click по классу

Question

В JavaScript обработчик события click по классу

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

var classname = document.getElementsByClassName("classname");



var myFunction = function() {

    var attribute = this.getAttribute("data-myattribute");

    alert(attribute);

};



classname.addEventListener('click', myFunction(), false);

Я ожидал получить окно предупреждения каждый раз, когда я нажал на один из классов, чтобы сказать мне атрибут, но, к сожалению, это не работает. Кто-нибудь может помочь, пожалуйста?

(Примечание -Я могу легко сделать это в jQuery но я хотел бы не как использовать)

730 3

javascript javascript-events

3 ответов:

Comments

Ничего не найдено.

Anudeep Bulla · Accepted Answer · 2017-05-23 15:18:16

это должно работать. getElementsByClassName возвращает ~~массив~~ массив-подобный объект (см. редактирование) элементов, соответствующих критериям.
var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}
jQuery делает часть цикла для вас, что вам нужно сделать в обычном JavaScript.

если у вас поддержка ES6 вы можете заменить последнюю строку с:
    Array.from(classname).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });
Примечание: старые браузеры (например, IE6, IE7, IE8) не поддерживают getElementsByClassName и так они возвращаются undefined.

правка : исправление

getElementsByClassName не возвращает массив, но HTMLCollection в большинстве, или NodeList-это некоторые браузеры (Mozilla ref). Оба эти типы массивов, (что означает, что они имеют свойство length, и объекты могут быть доступны через их индекс), но не строго массива или наследуется из массива. (это означает, что другие методы, которые могут быть выполнены на массиве, не могут быть выполнены на них типы)

Спасибо пользователю @Немо за то, что указал на это и заставил меня копать, чтобы полностью понять.

obermillerk · Accepted Answer · 2018-08-09 03:48:18

* это было отредактировано, чтобы позволить детям целевого класса инициировать события. Смотрите внизу Ответ для деталей. *

альтернативный ответ для добавления прослушивателя событий в класс, где элементы часто добавляются и удаляются. Это вдохновлено jQuery в on функция, в которой вы можете передать селектор для дочернего элемента, который прослушивает событие.
var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children

base.addEventListener('click', function(event) {
  // find the closest parent of the event target that
  // matches the selector
  var closest = event.target.closest(selector);
  if (closest && base.contains(closest)) {
    // handle class event
  }
});
Скрипка: https://jsfiddle.net/u6oje7af/94/

это будет слушать кликов на детей base элемент и если цель щелчка имеет родитель, соответствующий селектору, событие класса будет обработано. Вы можете добавлять и удалять элементы по своему усмотрению без необходимости добавлять дополнительные прослушиватели щелчков к отдельным элементам. Это поймает их всех даже для элементов, добавленных после добавления этого слушателя, так же, как функциональность jQuery (которая, я думаю, несколько похожа под капотом.)

это зависит от распространяющихся событий, так что если вы stopPropagation на мероприятии где-то еще, это может не сработать. Кроме того,closest функция имеет некоторые проблемы совместимости с IE, по-видимому (что нет?).

это может быть сделано в функцию, если вам нужно сделать этот тип действия прослушивания неоднократно, как
function addChildEventListener(base, eventName, selector, handler) {
  base.addEventListener(eventName, function(event) {
    var closest = event.target.closest(selector);
    if (closest && base.contains(closest)) {
      // passes the event to the handler and sets `this`
      // in the handler as the closest parent matching the
      // selector from the target element of the event
      handler.call(closest, event);
    }
  });
}
=========================================
Изменить: этот пост первоначально использовал matches функция для DOM элементы на цели события, но это ограничивало цели событий только прямым классом. Он был обновлен, чтобы использовать closest функция вместо этого, что позволяет для событий на потомках нужного класса, чтобы вызвать события, а также. Оригинал matches код можно найти на оригинальной скрипке: https://jsfiddle.net/u6oje7af/23/

DeV · Accepted Answer · 2018-06-25 15:56:52

всегда помните, что при использовании getElementsByClassName вы должны использовать цикл для доступа к переменным. Пример:
var classname = document.getElementsByClassName("classname");
for(i=0;i<classname.length;i++){
classname[i].addEventListener('click', myFunction, false);
}