What events can I attach to jQuery's on() function? - javascript

Besides click, mouseover, and mouseleave, are there any other events for jQuery's on() function or are those the main uses for on()? I can't find any documentation on it.

You can use built-in DOM events or you can create your own events. Here's a list of some of the built-in DOM events (all events don't occur on all types of objects):
click
dblclick
mousedown
mouseup
mouseover
mousemove
mouseout
keydown
keyup
keypress
load
unload
abort
error
resize
scroll
select
change
submit
reset
focus
blur
focusin
focusout
touchstart
touchend
touchmove
touchenter
touchleave
touchcancel
cut
copy
paste
beforecut
beforecopy
beforepaste
contextmenu
drag
dragstart
dragenter
dragover
dragleave
dragend
drop
selectstart
beforeunload
readystatechange
beforeprint
afterprint
See http://en.wikipedia.org/wiki/DOM_events for a decent description of most of these.

on() can be used for anything. It is just a way to delegate events to a specific DOM element.
Check out: http://api.jquery.com/on/
It will tell you how to "convert" bind, live, delegate functions into the new "on" method.

In addition to Parris anwser you can do
$("#whatever").on("my.awesome_event", function(event, one, two, three){
// stuff ...
});
$("#whatever").trigger("my.awesome_event", [1,2,3]);
In this example variables one, two, three will have values 1, 2, 3.

You could use any built in events (change, focus, mousedown, blur, touchstart, etc...) or you can make your own events and bind them even!

I use jQuery's on for both built-in DOM events such as change, click, blur, etc. and my own custom events within classes. For most classes I want custom events for, I will do this:
this.events = $({});
I can then bind custom events like this:
foo.events.on("myCustomEvent", function(e) {
// Do something
});
And I can trigger like this:
this.events.triggerHandler("myCustomEvent");

Related

Difference Between window.resize() and window.on('resize') in jquery

What is difference between window.resize() and window.on('resize' , function())
in jquery?
From jQuery page .resize():
This method is a shortcut for .on('resize', handler).
and .on() is:
The .on() method attaches event handlers to the currently selected
set of elements in the jQuery object. As of jQuery 1.7, the .on()
method provides all functionality required for attaching event
handlers. For help in converting from older jQuery event methods, see
.bind(), .delegate(), and .live().
So based on jQuery api description, I think there is no difference it's just a shortcut similar to $.click() and others
There was no difference between $("#element").resize() and $("#element").on('resize' , function()). The former was a shorthand for the latter. However, as of jQuery 3 the event shorthand is deprecated. This also applies to the following event shorthands: blur, click, focus, focusin, focusout, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.

JavaScript listen for all focus/blur events

So I'd like some JavaScript which listens for all potential focus/blur events on the page. I can do this for click events quite easily:
document.addEventListener('click', function (e) { console.log('click!') })
Any time any element is clicked, the event will trigger, even if the node was inserted after the event listener was added.
I'd like to do the same for focus events, but they are only triggered on individual elements, and never bubble up to the document.
How can I accomplish this? Is the only way to walk the DOM every few seconds and re-listen in case a new input element has been added?
You can use the focusin and focusout events which bubbles up.
document.addEventListener('focusin', function(e) { console.log('focusin!')})
Demo: Fiddle

How do we make use of `mouseover` and `mouseout` event?

As JQuery document says, I have converted many lines mouseover to mouseenter because it does not fire more than once.
http://api.jquery.com/mouseover/
mouseover fires when the pointer moves into the child element as well
mouseenter fires only when the pointer moves into the bound element.
Even hover event works as mouseenter and mouseleave, not as mouseover and mouseout.
It makes me wonder why there is mouseover event if mouseenter can do it all.
For me, mouseover gets fired unpredictably when you move mouse around on an element. It seems really dependent on the depth of child elements.
Is there a good use-case of mouseover and mouseout, which needs to fire multiple times?
That I know of, there is no use case for mouseover/mouseout at all. The only reason they exist is because these events are triggered by browsers because they are in the standard DOM event list. mouseenter and mouseleave are not standard events, but they are jQuery-specific constructs.
I suppose a use case would be if you wanted the event to trigger when moving the mouse over and out of the children of the element that the events are bound to. I can't think of anything specific, but at least this functionality is available. If only mouseenter/mouseleave existed, you wouldn't have a choice in the matter.
From http://code.jquery.com/jquery-1.9.1.js:
jQuery.each({
mouseenter: "mouseover",
mouseleave: "mouseout"
}, function( orig, fix ) {
/* content snipped */
Speculation: the reason why the creators of jQuery created the mouseenter and mouseleave non-standard events is because their behavior works as you would expect the mouseover/mouseout events to work (i.e. without regard for descendants).
Because the event contains coordinates of cursor.
So if you need to track mouse coordinates under the target, you have to use 'mouseover'

Detect change in div and do rebind events jQuery

In jQuery how can I watch a div to determine if it has changed so that I can rebind events and perform some other action as needed?
If the div has dynamic content I would like to tell you about event delegation.
Event delegation allows you to avoid adding event listeners to
specific nodes; instead, the event listener is added to one parent.1
To use event delegation in jQuery you use the on method and provide a selector argument.
You could use DOMSubtreeModified event(see here)
$('my-selector').bind('DOMSubtreeModified', function() {
console.log('Children have been modified');
});
I haven't checked the supported nature of this event but in chrome it works.
Unfortunately : Why is the DOMSubtreeModified event deprecated in DOM level 3?

Extend jQuery's .on() to work with mobile touch events

I am attempting to use the jQuery mobile events without the rest of jQuery mobile.
https://github.com/jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js
That snippet enables them all, and works fine, but not with the .on() event handler. E.g:
$('a').on('tap',function(){
console.log('Hi there!');
});
However it does work with .live(), but that is now depreciated.
So my question; is there a a way to extend the .on() functionality to include the tap event and others? Full list below:
touchstart
touchmove
touchend
orientationchange
tap
taphold
swipe
swipeleft
swiperight
scrollstart
scrollstop
Thanks :)
However it does work with .live(), but that is now depreciated.
So I take it that you want to use event delegation to preserve those events on replaced elements. That would mean that this:
$('a').on('tap',function () {
console.log('Hi there!');
});
would need to change to something like:
$(document).on('tap', 'a', function () {
console.log('Hi there!');
});
in order for it to behave the same as $("a").live("tap", ...
Maybe it should be better to extend the JQuery event code for mobile and desktop.
One way to do this is to use the JQuery vmouse (virtual mouse) plugin.
From vmouse plugin comments:
// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
//
// The idea here is to allow the developer to register listeners for the
// basic mouse events, such as mousedown, mousemove, mouseup, and click,
// and the plugin will take care of registering the correct listeners
// behind the scenes to invoke the listener at the fastest possible time
// for that device, while still retaining the order of event firing in
// the traditional mouse environment, should multiple handlers be registered
// on the same element for different events.
//
// The current version exposes the following virtual events to jQuery bind methods:
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
For a better explanation, see https://coderwall.com/p/bdxjzg
vmouse plugin: https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.vmouse.js
Also see this link about current state of (touch) events: http://blogs.adobe.com/adobeandjquery/2011/03/07/the-current-state-of-touch-events/

Categories

Resources