addEventListener 不向元素添加监听器答案

【问题标题】：addEventListener doesn't add listener to elementaddEventListener 不向元素添加监听器
【发布时间】：2015-07-14 01:12:32
【问题描述】：

我有下一个代码：

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 “完成”而不是“交互式”，但它也不起作用。当我尝试将此侦听器添加到 body 元素时，它可以正常工作（添加了侦听器并且所有处理功能都可以正常工作）。

我不知道问题出在哪里。所以请任何人给我建议，我应该朝哪个方向看。

【问题讨论】：

您的 handleDragOver 和 handleDrop 函数是否阻止了默认值？
如何检查属性？ dropZone.ondragover 很可能仍然是 null 但在 Firefox 中，例如在页面检查器视图中的元素旁边有一个小的“ev”框。这些指示元素具有哪些事件侦听器。例如，在 StackOverlow 上 document.body 有两个 mousedown 事件和三个 click 事件，尽管 document.body.onclick 和 document.body.onmousedown 都是 null。
Try this.
你的页面的 HTML 中有 dropZone 元素吗？或者，它是通过一些代码动态添加的吗？您是否尝试过将事件侦听器添加代码放在页面末尾（没有 readystatechange 代码）？您是否 100% 确定页面中只有一个 id 为 dropZone 的元素？ addEventListener() 没有设置ondragover 和ondrop 所以它们为空是正常的。
这可能无法解决您的问题，但使用document.onreadystatechange 不是一个好主意，因为您可以注册超过 1 个侦听器。我建议将其更改为 window.onload

标签： javascript drag-and-drop addeventlistener

【解决方案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>

【讨论】：

嗯，当在这里作为代码 sn-p 运行时，该示例似乎不起作用......哦，好吧。