How to bind a handler to a selection change on window?

Question

Basically I need to know when the window.getSelection() has changed and bind a handler to this event. Ideas?

OBS: Please note that I'm not looking to bind a selection change on a INPUT or TEXTAREA. I'm talking about any selection in the window.

Answer 1

2019 update

All major browsers now support the selectionchange event, which does the job. Firefox was the last browser to get it, and it has had it without a configuration flag since version 52 (released in March 2017).

Original answer

There is no cross-browser way of detecting changes to the selection. IE (since version 5.5, I think) and WebKit/Blink browsers (Chrome, Safari and Opera version from the last couple of years, for example) support a selectionchange event on the document which does exactly what you want.

Firefox and pre-Blink Opera have no such event and all you can do is detect selection changes made via keyboard and mouse events, which is unsatisfactory (there is no way of detecting "Select All" from context or edit menus, for example), or simply poll the Selection object returned by window.getSelection() (checking the selection's anchorNode, anchorOffset, focusNode and focusOffset properties against their previous values should be sufficient).

Answer 2

There is no cross-browser event for that.

However, there does exist an event called selectionchange, which trigger on every change in a selection in the document, but it is only supported in IE and recent WebKit (Chrome/Safari), so no Firefox/Opera.

You can use the selectionchange event like this:

$(document).on('selectionchange', function(e) {
    console.log('selectionchange', e.originalEvent); 
});

jsfiddle example