How can i register "on" events in loop:
evetns = [
"click"
"mouseover"
...
]
for(events...) {
$(document).on(events[i], 'someTarget', function() {...});
}
-
2Are you saying you want to bind multiple types of events to all run the same function?nnnnnn– nnnnnn2016-08-31 01:18:08 +00:00Commented Aug 31, 2016 at 1:18
Add a comment
|
3 Answers
Don't register events in a for loop is my answer.
The on() function delegates the events on the same object, so there is no need for this kind of trickery. What you can do is to use events.join(' ').
This way the $(document) object gets all the events in a string separated by a single space resulting in:
$(document).on('click mouseover ...', function(){/**/});
Now the trick to optimize this, I'd say is use an eventHandler that maps specific functions to separate events.
$(document).on(events.join(' '), myEventHandler);
function myEventHandler(e){
switch (e.type){
case 'click': return myClickFn(e);
case 'mouseover': return myOverFn(e);
default: return false;
}
}
This way all functionality can be kept separate in the browser's memory.
Imagine without the switch statement, you can achieve all events to fire the same function at the same time the event occurred. If that is what you need however, I suggest to use throttle or debounce to handle this use-case.
4 Comments
nnnnnn
Maybe
case 'click': return myClickFn(e); (and no break)? I'd pass the whole event object to the individual handlers in case they want to stop propagation or whatever.
Tim Vermaelen
Yes maybe, does it add value to my message, let's say ... 'memory optimization' wise?
nnnnnn
Well my point is that the return value from the event handler has meaning, so if you don't return the value from the individual handlers that changes the behaviour.
Tim Vermaelen
Yep, looks better. Was also looking here based on what you said. Since it can be further optimized into a better polymorphic solution I believe. But I don't want to go this far in my explanation.
If i understand you correctly this should do what you want
var events = ['click', 'mouseover'];
console.log($('.dog'))
function registerEvents() {
events.forEach(function(value, index) {
$(".dog").on(value, onEvent); // Replace ".dog" with your own selctor
});
}
function onEvent(event) {
console.log(event.type);
}
registerEvents();
If you want to repeat registerEvents() every minute you could do something like
setInterval(registerEvents, 60000) // Repeat every minute
Comments
In modern browsers, you can use let to make the index block-scoped:
for(let i = 0; i < events.length; i++)
$(document).on(events[i], 'someTarget', function() {...});
