JavaScript中与ondragover相对的拖拽离开触发事件是什么？

不存在原生的ondragaway事件，你需要的拖拽离开场景可以用HTML5原生拖拽API提供的dragleave事件实现，同时还要在文件完成放置时移除高亮样式，避免放置后区域保持绿色。

原有代码的问题 #

你当前仅在dragover（拖拽悬浮在区域上方）事件中添加了高亮类，没有在拖拽离开、文件放置完成两个节点做样式重置，才会导致区域一直保持绿色。
另外需要注意：dragover事件的默认行为会阻止元素成为可放置目标，必须在该事件中调用event.preventDefault()，否则drop事件不会正常触发。

修正后的实现代码 #

JavaScript部分 #

var dropzone = document.querySelector(".dropzone");

// 拖拽悬浮时添加高亮，同时阻止默认行为允许放置
dropzone.ondragover = event => {
  event.preventDefault();
  event.target.classList.add("fileover");
};

// 拖拽离开放置区时移除高亮
dropzone.ondragleave = event => {
  event.target.classList.remove("fileover");
};

// 文件完成放置时移除高亮，同时处理文件接收逻辑
dropzone.ondrop = event => {
  event.preventDefault();
  event.target.classList.remove("fileover");
  // 此处可添加自定义的文件获取、上传逻辑
  // const files = event.dataTransfer.files;
};

CSS部分（与原有逻辑一致，无需修改） #

.dropzone {
  border: 1px solid lightgray;
  padding: 2rem;
  margin: 2rem;
  border-radius: 10px;
  font-family: Arial;
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem;
}

.fileover {
  background-color: green;
}

HTML部分（移除行内drop事件绑定，统一交给JS处理） #

<input id="file" type="file" style="display: none"/>
<label for="file">
  <div class="dropzone">Drag and drop or select a file</div>
</label>

可选优化（避坑提示） #

如果后续你的放置区内部添加了子元素，可能会出现拖拽到子元素上时dragleave误触发的问题，可以在dragleave回调里加一层判断，确认鼠标真正移出了放置区范围再移除类：

dropzone.ondragleave = event => {
  if (!dropzone.contains(event.relatedTarget)) {
    dropzone.classList.remove("fileover");
  }
};

内容的提问来源于stack exchange，提问作者c136