Bind all available events to an element

Question

can I bind all the available events to an element

$('body').on('all available events', '.element', function(e) {
  if (e.type == 'click') {
    // do something...
  } 
  else if (e.type == 'change') {  
    // do something else...
  }
});

I do not want to give them individually like

$('body').on("change click", '.element', function(e) {...});

Just out of curiosity, do you have a list of _all available events_? — lshettyl, Apr 22 '15 at 10:46
Maybe this can help.. stackoverflow.com/questions/5848598/how-can-i-bind-all-events-on-a-dom-element — Brijesh Bhatt, Apr 22 '15 at 10:47
Here is a [possible answer](http://stackoverflow.com/questions/5848598/how-can-i-bind-all-events-on-a-dom-element) — lshettyl, Apr 22 '15 at 10:47

score 3 · Answer 1 · answered Apr 22 '15 at 10:47

I'll not recommend you to do that, but if you want to:

$('body').on('blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu', function(e) {
    // Your code here
});

Reference: https://github.com/jquery/jquery/blob/master/src/event/alias.js#L6

adeneo · Answer 2 · 2015-04-22T11:08:04.290

Seems like a bad idea, but you could get all the available event on an element by running Object.keys on it, and filtering out everything that starts with on....

To pass it to jQuery, the on... part has to be removed as well

var props = Object.keys(document.body).filter(function(x) {
    return x.indexOf('on') === 0;
}).map(function(x) {
    return x.replace('on','');
}).join(" ");

$('body').on(props, '.element', function(e) {
    console.log(e.type)
});

FIDDLE

In my browser that would bind the event handler to

unload
storage
popstate
pageshow
pagehide
online
offline
message
languagechange
hashchange
beforeunload
scroll
resize
load
focus
error
blur
autocompleteerror
autocomplete
waiting
volumechange
toggle
timeupdate
suspend
submit
stalled
show
select
seeking
seeked
reset
ratechange
progress
playing
play
pause
mousewheel
mouseup
mouseover
mouseout
mousemove
mouseleave
mouseenter
mousedown
loadstart
loadedmetadata
loadeddata
keyup
keypress
keydown
invalid
input
ended
emptied
durationchange
drop
dragstart
dragover
dragleave
dragenter
dragend
drag
dblclick
cuechange
contextmenu
close
click
change
canplaythrough
canplay
cancel
abort
webkitfullscreenerror
webkitfullscreenchange
wheel
selectstart
search
paste
cut
copy
beforepaste
beforecut
beforecopy

score 0 · Answer 3 · answered Apr 22 '15 at 10:54

You should not bind all events to your handler, because you don't know what "all" is, thus it is bad practice for almost all applications. Also, you cannot bind to all events, because addEventListener which is used internally in jQuery requires you to state the type to listen to. Even if you have a list of "all" events, there can still be custom events defined which have their own arbitrary names.

Bind all available events to an element

3 Answers3