Let's consider the problem of capturing mousemove on the whole HTML document.

I know four objects to which event listener can be attached:

window, document, document.body, document.documentElement

After simple tests it seemed to me that attaching to any of them has the same effect.

$(window).on('mousemove', function(){console.log(1)})

I was wondering if there is any difference I don't know about (performance, patibility?)

Let's consider the problem of capturing mousemove on the whole HTML document.

I know four objects to which event listener can be attached:

window, document, document.body, document.documentElement

After simple tests it seemed to me that attaching to any of them has the same effect.

$(window).on('mousemove', function(){console.log(1)})

I was wondering if there is any difference I don't know about (performance, patibility?)

• javascript
• jquery
• html
• dom
• mouseevent

• As far as I know both window and document.documentElement attach to html whereas document.body attaches to body which isn’t guaranteed to cover the whole page. – Sebastian Simon Commented May 17, 2015 at 10:22

1 Answer 1

There are two potential issuses with binding the event to the document.body object:

• Some browsers doesn't allow accessing the body object before the content in the page has begun being parsed, so binding the event directly in the head won't work. You need to bind it from the load or ready event, or from code inside the body.

• In standards pliant mode (HTML 4, XHTML, HTML5) the body element doesn't automatically cover the entire window. It will only be as large as it needs to contain the content, and if it has a margin that is not covered by the body element.

Also, if the page contains frames, then this won't work. In that case, follow steps explained here.