javascript - 将EventListener 添加到Javascript 中的文章元素

Question

我正在尝试向所有文章元素添加EventListener，这样当单击它们时，它们就会变成可拖动元素。

我在此任务中没有使用 jQuery。

尝试1:

document.getElementsByTagName("ARTICLE").addEventListener('click', function(){
document.getElementsByTagName("ARTICLE").setAttribute('draggable', true);});

尝试2:

function draggableTrue() {
    var addDrag = document.getElementsByTagName("article");
    addDrag.setAttribute('draggable', true);
}

//add event listener to articles
var draggableArticles = document.getElementsByTagName("article");
draggableArticles.addEventListener('onclick', draggableTrue);

在这两种情况下，我都收到“未捕获的类型错误:未定义不是函数”，这通常表明我遗漏了一些东西，但在阅读后我无法弄清楚是什么。

Answer 1

document.getElementsByTagName 返回一个集合。因此，您需要对其进行迭代以添加事件监听器。该集合是 native DOM 节点集合，而不是 jquery 集合，因此您不能在该集合上使用 addEventListener。

var articles = document.getElementsByTagName("ARTICLE");
var eventListener = function(){console.log('clicked an articles')}

for(var i=0; i<articles.length; i++){
    articles[i].addEventListener('click', eventListener );
}