addEventListener到Javascript中的article元素

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);

在这两种方法中，我都会收到“未捕获的TypeError：未定义的函数”，通常指出我缺少了一些内容，但是在阅读后我无法弄清楚是什么。

Answer 1

document.getElementsByTagName返回一个集合。 因此，您需要对其进行迭代以添加事件侦听器。 该集合是本机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 );
}

Answer 2

好吧，您必须检查您的后者情况。

但是还有另一个问题，与DOM元素相关的任何代码都必须在加载特定元素（或由Javascript Engine识别）时执行。 以下事件（onload）确保窗口何时加载，然后执行分配给它的闭包。 window.onload = function(){}是您可能需要的。

window.onload = function(){
 // call your functions or document event listeners here
}

同样，TagName，TagNameNS和ClassName都返回一个您可以迭代访问的集合：

var allDivs = document.getElementsByTagName("div");

for(var i = 0; i < allDivs.length; i++)
{
   allDivs[i].addEventListener();
}