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

Question

This is kind of related to my previous Q where I had this code: http://jsfiddle.net/NQQL6/

There I'm attaching an event listener for dragstart and dragend on document . The alternative would be:

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

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

So is there any difference? Should I go this way?

Answer 1

The only difference is the when drag events trigger. When on the element it only triggers if the drag/drop is happening on that element, where as set for the document they are triggered when drag/drop anywhere on the page.

Unless you do some css tricks to show where the drag/drop area is the user might try to drop whatever somewhere else and the event wont ever get triggered.

It all depends on what you need happen. For instance when dealing with file drag and drop i usually put the listener on the document as if it were just on an element and the user doesnt drag the file onto that element the browser just decides to display the file navigating the user away from your page (if its a img,text,html etc file, otherwise it tries to download it).