addEventListener к элементу статьи в Javascript

Я пытаюсь добавить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);

В обоих случаях я получаю сообщение «Uncaught TypeError: undefined is not a function», которое обычно указывает на то, что я чего-то упускаю, но после прочтения я не могу понять, что именно.


javascript addeventlistener draggable getelementsbytagname html5-draggable
person elPato    schedule 12.08.2014    source источник
comment
ARTICAL должен быть в нижнем регистре   -  person Bhojendra Rauniyar    schedule 12.08.2014
comment
Это не имеет значения. bytes.com/topic/javascript/answers/   -  person Biketire    schedule 12.08.2014
comment
Да, сначала я смотрел на это (stackoverflow.com/questions/2291061/) и решил попробовать прописные буквы.   -  person elPato    schedule 12.08.2014
comment
getElementsByTagName возвращает NodeList, вам следует перебрать возвращенный список, а затем вызвать метод.   -  person undefined    schedule 12.08.2014

Ответы (2)


arrow_upward
2
arrow_downward

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 );
}
person Vishwanath    schedule 12.08.2014
comment
С точки зрения производительности обработчик должен быть определен вне цикла for. - person undefined; 12.08.2014
comment
Отлично, спасибо за объяснение! Я видел HTMLCollection (здесь указано developer.mozilla.org/en -US / docs / Web / API /), но я объяснил это своей неопытностью. - person elPato; 12.08.2014
comment
просто чтобы подтвердить, возможно ли установить атрибут 'setAttribute (draggable, true);' на статье, по которой щелкнули мышью. Мне кажется, я просто создаю цикл, пытаясь добавить .getElementsByTagName в функцию. - person elPato; 12.08.2014

arrow_upward
0
arrow_downward

Что ж, вы должны проверить свои последние случаи.

Но есть еще одна проблема: любой код, связанный с элементами 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();
}
person Mostafa Talebi    schedule 12.08.2014