Вопрос по html5-draggable, javascript, addeventlistener, getelementsbytagname, draggable – addEventListener к элементу статьи в JavaScript

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

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

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

Ваш Ответ

2   ответа
2

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

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

Похожие вопросы