Я'м пытаюсь написать некоторые JavaScript для получения атрибута класса, который был выбран. Я знаю, что для этого правильный путь, я должен использовать прослушиватель событий. Мой код выглядит следующим образом:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
Я ожидал, чтобы получить окно с предупреждением каждый раз, когда я нажал на один из классов, чтобы рассказать атрибут, но, к сожалению, это не работает. Может кто-нибудь помочь пожалуйста?
(Примечание - И можете легко сделать это в jQuery и я не как использовать it)
Это должно работать. 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.
Если у вас есть поддержка ЕС6 вы можете заменить последнюю строку с:
Array.from(classname).forEach(function(element) {
element.addEventListener('click', myFunction);
});
Примечание: старыми браузерами (типа ИЕ6, ИЕ7, ИЕ8) Дон´getElementsByClassName поддержки T `и поэтому они возвращать undefined.
Редактировать : коррекция
getElementsByClassName
не возвращать массив, но уход в большинстве, или NodeList является некоторые браузеры (Мозилле ссылка). Оба эти типы массивов, (что означает, что они имеют свойство length, и объекты могут быть доступны через их индекс), но не строго массива или наследуется из массива. (смысл других методов, которые могут быть выполнены на массив не может быть выполнена на этих типов)
Спасибо пользователю @[Немо][2] за указание на это и заставила меня покопаться в для полного понимания.
[2]: https://stackoverflow.com/users/1333493/nemo на "Немо"и
Это было отредактировано, чтобы для детей целевого класса, чтобы вызвать события. Смотрите внизу Ответ для деталей.
Альтернативный ответ, чтобы добавить прослушиватель событий в классе, где предметы часто добавляются и удаляются. Это вдохновило на jQuery'ы функция
куда вы можете сдать в селекторе для ребенка элемент, что событие прослушивает.
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
}
});
Скрипка:
Это будет слушать за клики на детей элементов "базовой", и если нажать родительского соответствующий селектор, класс события будут обработаны. Вы можете добавлять и удалять элементы, как вам нравится, без необходимости, чтобы добавить больше нажать слушателей на отдельные элементы. Это будет поймать их всех, даже для элементов, добавленных после этого слушатель был добавлен, как функции jQuery (который я представляю чем-то похожа под капотом).
Это зависит от событий, распространяющихся, так что если это происходит на событие где-то еще, это может не сработать. Кроме того, близкий
функция имеет некоторые проблемы совместимости с 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);
}
});
}
=========================================
Редактировать: этот пост изначально использована функция соответствует
для элементов DOM на целевые мероприятия, но это ограниченное целями мероприятия только прямой класс. Он был обновлен, чтобы использовать функцию "ближайшие", позволяя за событий на детей нужного класса, чтобы вызвать также событий. Исходное играм
код можно найти на оригинальной скрипке:
https://jsfiddle.net/u6oje7af/23/
Вы можете использовать код ниже:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);