我目前正试图写一些JavaScript来获取被点击的类的属性。我知道要正确地做到这一点,我应该使用一个事件监听器。 我的代码如下。
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
我希望每次点击其中一个类时,都能得到一个提示框,告诉我这个属性,但不幸的是,这并不奏效。谁能帮帮我?
(注意 - 我可以很容易地在jQuery
中做到这一点,但我不希望***使用它)
这应该是可行的。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)。这两种类型都是类似于数组的,(意味着它们有一个长度属性,并且可以通过它们的索引来访问对象),但严格来说不是一个数组或从数组继承的。(意味着可以在数组上执行的其他方法不能在这些类型上执行)。
感谢用户@Nemo指出这一点,并让我深入了解,以充分理解。
对此进行了编辑,以允许目标类的孩子触发事件。详情见答案的底部。
另一个答案是在一个经常添加和删除项目的类中添加一个事件监听器。这是受jQueryon
函数的启发,你可以传入一个事件监听的子元素的选择器。
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
}
});
Fiddle:
这将监听对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
代码可以在原始的fiddle中找到。
https://jsfiddle.net/u6oje7af/23/
你可以使用下面的代码。
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);