javascript - 在文档上绑定事件侦听器与在多个元素上绑定事件侦听器

Question

这有点与我之前的 Q 相关，我有这个代码：http: //jsfiddle.net/NQQL6/

在那里，我为dragstart和dragendon附加了一个事件侦听器document。替代方案是：

var elements = document.querySelectorAll('a');

for(var i = 0; i < elements.length; i++){
  elements[i].addEventListener('dragstart', function(){
    ...
  })
}

那么有什么区别吗？我应该走这条路吗？

Answer 1

唯一的区别是何时触发拖动事件。在元素上时，它仅在该元素上发生拖放时触发，其中为文档设置它们在页面上的任何位置拖放时触发。

除非您使用一些 css 技巧来显示拖放区域的位置，否则用户可能会尝试将任何内容拖放到其他地方，并且该事件永远不会被触发。

这一切都取决于你需要发生什么。例如，在处理文件拖放时，我通常将侦听器放在文档上，就好像它只是在一个元素上一样，并且用户不会将文件拖到该元素上，浏览器只是决定显示文件，使用户远离您的页面（如果它是一个 img、text、html 等文件，否则它会尝试下载它）。