addEventListener не добавляет слушателя к элементу

Question

У меня есть следующий код:

document.onreadystatechange = function() { 
    if (document.readyState == "interactive") { 
    var dropZone = document.getElementById("dropZone"); 
    dropZone.addEventListener("dragover", handleDragOver); 
    dropZone.addEventListener("drop", handleDrop); 
    console.log(dropZone); 
    } 
}; 

Проблема заключается в том, что addEventListener не добавляет слушателя к объекту Dropzone. Поэтому, когда я проверяю объект dropZone в консольном журнале, свойства ondragover и ondrop пусты.

Я попытался использовать readyState «complete» вместо «interactive», но он тоже не работает. Когда я пытаюсь добавить этих слушателей к элементу body, он отлично работает (слушатели добавлены и все функции обработки работают).

Я не могу понять, в чем проблема. Поэтому, пожалуйста, дайте мне совет, в каком направлении я должен смотреть.

Answer 1

Это попытается найти элемент dropZone, и если он еще не загружен, повторите попытку после полной загрузки DOM. Это должно работать везде, где ваш сценарий (голова, начало тела, конец тела, внешний файл, асинхронно загружается ...)

function activateDropZone() { 
 
    var dropZone = document.getElementById("dropZone"); 
 
    if (dropZone) { 
 
     dropZone.addEventListener("dragover", handleDragOver, false); 
 
     dropZone.addEventListener("drop", handleDrop, false); 
 
    } else document.addEventListener("DOMContentLoaded", activateDropZone, false); 
 
} 
 

 
function handleDragOver(e) { 
 
    e.preventDefault(); 
 
    document.getElementById("dropZone").style.backgroundColor = "purple"; 
 
} 
 

 
function handleDrop(e) { 
 
    e.preventDefault(); 
 
    document.getElementById("dropZone").style.backgroundColor = "violet"; 
 
    document.getElementById("draggable").style.visibility = "hidden"; 
 
} 
 

 
activateDropZone();

DIV {float: left; width: 200px; height: 200px; background-color: blue; color: white;} 
 
DIV:last-of-type {width: 100px; height: 100px; background-color: red;}

<DIV ID="dropZone">dropzone</DIV> 
 
<DIV ID="draggable" draggable="true">draggable</DIV>