2

I am writing a drag drop handler and wish to set the eventListeners to the highest level - which I presumed would be the body. However, I noticed in the example at MDN, they set the listeners to document versus document.body which leads me to ask why would this be preferable and in general, why would I choose listeners attached to one versus the other (and do they both support the same listeners)?

So when do I use document.body.addeventListener() versus document.addEventListener()?

UPDATE This SO question addresses WHEN to bind the events to document versus at the element level. Very helpful.

UPDATE2 Interestingly enough, when document.addEventListener() is set for all the drag drop listeners, Firefox hangs with a drag (Chrome does not). When I change it to document.body.addEventListener() for dragEnter, dragOver, dragLeave, drop it all works fine. Seems like dragStart wants to be on the document however.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
mseifert
  • 5,390
  • 9
  • 38
  • 100
  • Try o read this article https://www.sitepoint.com/jquery-body-on-document-on/ – Tareq Apr 12 '17 at 20:57
  • _"I am writing a drag drop handler"_ Why do you not attach the handlers to the elements where drag and drop occur? – guest271314 Apr 12 '17 at 21:01
  • 3
    @guest271314 - If I have 1000 elements that can be dragged / dropped, I can either attach 6 eventListeners `(dragStart, dragEnter, dragOver, dragLeave, drop, dragStop)` to all 1000 elements, or attach these once to the `document` and process what to do with the event `target`. Since I have to process the `target` anyway, it seems more efficient to have a global handler. – mseifert Apr 12 '17 at 21:07
  • @Tareq - thanks for the link. That article linked [a SO question](http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document) which was extremely helpful. – mseifert Apr 12 '17 at 21:12

1 Answers1

2

body is but one element within a document. document is more "top-level" than body. But, in the HTML, there is no tag the explicitly denotes the document itself, thus in HTML, body gets used as the next best thing. Since events bubble, when the body reports loaded, it is generally safe to say that the document is loaded as well. You can see a list of events and what objects they work with/on here.

That issue aside, inline event handlers should be avoided in favor of setting up event handlers in JavaScript using addEventListener because inline event handlers:

  1. Create spaghetti-code that is harder to read, leads to duplicated code and doesn't scale well.

  2. Implicitly create global wrapper functions that alter the this binding within the supplied event handling code. This can cause your handler to not work properly.

  3. Don't follow the W3C DOM Event Handling standard and are not as robust as addEventListener.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • 1
    Specifically, I am using addEventListener to add all my events. Just trying to figure out the best place to add them: `document.body.addeventListener()` or `document.addEventListener()` – mseifert Apr 12 '17 at 20:57
  • @mseifert You use `addEventListener` on the object that you want the event registered with. `body` is rarely used in this context in favor of `document`. As I stated, the only reason you see `body` used is with older "inline" event registrations where there is no explicit way to reference `document`. – Scott Marcus Apr 12 '17 at 20:58