javascript - addEventListener doesn't add listener to element -

i have next code:

document.onreadystatechange = function() {   if (document.readystate == "interactive") {     var dropzone = document.getelementbyid("dropzone");     dropzone.addeventlistener("dragover", handledragover);     dropzone.addeventlistener("drop", handledrop);     console.log(dropzone);   } }; 

the problem addeventlistener doesn't add listener dropzone object. when check dropzone object in console log "ondragover" , "ondrop" properties empty.

i tried use readystate "complete" instead of "interactive" doesn't work too. when try add listeners body element it's work fine (listeners added , handling functions work).

i can't figure out problem is. please give me advice in direction should look.

this try find dropzone element, , if it's not loaded, try again after dom loaded. should work wherever script (head, start of body, end of body, external file, asynchronously loaded...)

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>