无法使用.addEventListener()方法为dropzone绑定事件监听器求助

我正在构建一个简单的拖拽应用Demo，目标是将可拖拽元素拖放到dropzone中完成放置。

遇到的问题：

• 无法通过addEventListener()方法将dragoverHandler和dropHandler回调函数绑定到dropzoneOne元素
• 直接在HTML的dropzone元素上添加ondrop="dropHandler(event)"这类属性时，代码能正常运行

问题原因 #

用addEventListener绑定事件时，错误使用了HTML事件属性的命名方式（带on前缀），正确的原生事件名不需要加on前缀：

• HTML属性写法：on[事件名]（比如ondrop）
• addEventListener写法：直接用[事件名]（比如drop）

代码里写的dropzoneOne.addEventListener('ondragover', dragoverHandler)和dropzoneOne.addEventListener('ondrop', dropHandler)，其中ondragover和ondrop是错误的事件名，导致事件无法绑定。

修正后的代码 #

只需要修改事件名，去掉on前缀即可：

const draggableOne = document.getElementById('draggable-1');
const dropzoneOne = document.getElementById('dropzone-1');

function dragstartHandler(event) {
    console.log('start');
    event.dataTransfer.setData('text/plain', event.target.id);
    event.currentTarget.style.backgroundColor = 'yellow';
}

function dragoverHandler(event) {
    console.log('dragging over');
    event.preventDefault();
}

function dropHandler(event) {
    console.log('dropped');
    const id = event.dataTransfer.getData('text/plain');
    const draggableElement = document.getElementById(id);
    event.target.appendChild(draggableElement);
    event.dataTransfer.clearData();
}

draggableOne.addEventListener('dragstart', dragstartHandler);
// 修正事件名，移除on前缀
dropzoneOne.addEventListener('dragover', dragoverHandler);
dropzoneOne.addEventListener('drop', dropHandler);

修正后，拖拽事件就能正常触发，元素可以成功拖放到目标区域。

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