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

Posted 2023-05-08

【中文标题】将EventListener添加到Javascript中的文章元素

【英文标题】：addEventListener to an article element in Javascript

【发布时间】：2014-10-05 10:26:50

【问题描述】：

我正在尝试将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);

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

【问题讨论】：

ARTICAL 应该是小写

这并不重要。 bytes.com/topic/javascript/answers/…

是的，我第一次看到这个 (***.com/questions/2291061/…) 并认为我会尝试大写。

getElementsByTagName返回一个NodeList，你应该遍历返回的列表然后调用方法。

【参考方案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 );

【讨论】：

性能方面，处理程序应在for 循环之外定义。

完美，感谢您的解释！我看到了 htmlCollection（在此注明 developer.mozilla.org/en-US/docs/Web/API/…），但我代表我将其归结为缺乏经验。

只是为了确认，是否可以设置 'setAttribute("draggable", true);'在点击的文章上。我觉得我只是通过尝试在函数中添加 .getElementsByTagName 来创建一个循环。

【参考方案2】：

好吧，你必须检查你的后一种情况。

但还有另一个问题，任何与 DOM 元素相关的代码都必须在加载某个元素（或被 Javascript 引擎识别）时执行。以下事件（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();