0

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

在两者中,我都收到“未捕获的类型错误:未定义不是函数”,这通常指出我遗漏了一些东西,但在阅读后我不知道是什么。

4

2 回答 2

2

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 );
}
于 2014-08-12T11:17:23.390 回答
0

好吧,你必须检查你的后者情况。

但是还有另一个问题,任何与 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();
}
于 2014-08-12T11:16:37.297 回答