Does anyone have a link to a list of ALL events that can be passed to jQuery .on()?
Here are a few, but I cant seem to find a definitive list.
click
mouseenter
mouseleave
contextmenu (works on right click, and tap and hold with Android (not iOS))
focus
blur
focusin
focusout
scroll
I'm looking for Android/iOS touch events in particular.
Thanks!
EDIT 1: So I think the real question i'm asking is what events are standard across all browsers/devices?
I think you have to realise that the important question is not: What events can you pass to jQuery.on()? Because you can technically pass any event to that method.
The real question is, what events does the browser/device fire? Obviously, some events — as the ones you listed — are a standard, but some browsers will surprise you by not firing some events or by having their own custom events.
You can find a pretty extensive list at the MDN:
Events reference
But keep in mind that the point is that you can also define your own custom events, trigger them, and bind event listeners to them.
For touch screen devices you will have the following events:
touchstart
touchend
touchmove
touchcancel
Are you using jQuery mobile? The events are listed here: http://api.jquerymobile.com/category/events/
Google DOM Events, get MDN Event Reference.
You may be particularly interested in the TouchEvent subclass.
Of course, you can bind any custom event using .on and trigger any custom event with .trigger, so the real answer is infinite.
You can register any event names. Whether they will be called is another question… Custom events can be manually triggered, and there are many that are triggered natively in the DOM. For some of them, jQuery has special shorthand methods.
I'm looking for Android/iOS touch events in particular.
Have a look at https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events then, or the W3 spec.
All jQuery events.
Here are lists of keyboard events and mouse events.
Related
I may be dumb, but can't find any info about it.
If I want to attach a JavaScript function to the event for a mouse up I do it this way:
<div id="div1" on-mouseup={{menuMouseUp}}></div>
What are the key words for touch events? Is it on-touch-start, on-touchstart.. ?
Or it's not supported and we need to use pointers:
http://www.polymer-project.org/platform/pointer-events.html
I'm trying to test it on Ipad and no luck at all.
Cheers!
Today, Polymer implements a set of high-level events that unify a few different underlying event models.
For example, when using Polymer, instead of click you can use tap. Instead of mouseup you can use up. The Polymer equivalents work for mouse or touch.
There is some detailed information here:
https://groups.google.com/forum/#!msg/polymer-dev/ba4aDyOozm8/Hw0GJLvcOCMJ
The official documentation only says:
The event's type, such as "click", "blur" or "keypress".
For iOS devices the touchstart is another event which is working. Where can I get the full list of all possible events? I like for example actually to get the event for the <select> event hasChanged(). Is this based on another library?
Meteor doesn't define the events it supports — it simply creates a cross-browser event listener wrapper. If you wanted to create custom events and trigger them, Meteor would pick them up.
The native input events supported depends on the browser: the Mozilla Developer Network reference is a good place to start.
Th docs also says that all the DOM events are also possible in addition to click, focus, blur, etc.
Other DOM events are available as well, but for the events above,
Meteor has taken some care to ensure that they work uniformly in all
browsers.
You can see the list of available Javascript events here and here.
I write mousedown / mouseup event listener and it is able to work on my android phone , so is it not necessary for me to write touchstart functions for all the phones if I just need a simple touch?
If your logic is working, why would you want to change it / add more event handlers?
I recommend reading this documentation to determine for yourself whether or not you should use these specific handlers. Although it is iOS documentation, it gives you a good feel of how the mobile events are handled.
More ontopic:
If you just need a simple touch event, it seems to me that a 'click' event listener would be enough. If you want to do any scrolling / mouse(touch?) specific stuff, again: read that documentation.
I have a fairly large html page and I've noticed that my click-to-show/hide process appears a little retarded.
I've also discovered that if I use "mouseenter" in place of "click", the response is almost instantaneous (as opposed to 2 seconds when I use "click").
$("button.showhide").click(function() { $("#"+$(this).attr("id")+"-1").toggle() });
versus
$("button.showhide").mouseenter(function() { $("#"+$(this).attr("id")+"-1").toggle() });
Is there any way to make the click event as fast as the mouseenter event?
Thanks.
Edit:
Does the following help in explaining this behaviour?
(There's no mention of a "javascript event" for mouseenter.)
.click()
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
.mousedown()
Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
.mouseenter()
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
You should use a delegate to trigger your events(from jQuery 1.7 use on method for events binding) :
$("button").on('click','.showhide',function(){/*...*/});
You could improve the speed of the event handling, but that depends on the html markup.
For instance, if all of your showhide buttons are grouped in a certain div, and some other buttons are in other scattered all over the body, you should use something like this :
$("button-container-selector").on('click','button.showhide',function(){/*...*/});
I think that the time to process
function() { $("#"+$(this).attr("id")+"-1").toggle();
is exactly the same in the two cases, it's just that mouseenter triggers much earlier than click and so you think it's faster.
The only thing i could think of is that you have realy a lot of click handlers, but i think you really nead a lot to slow down things
EDIT - Try doing
$('body').on("click", "button.showhide", function() { $("#"+$(this).attr("id")+"-1").toggle());
By reading all previous answers, and the behaviour explained in the question, I think that there might have been a key piece of information missing. Was your test was happening in a tablet or a touch-enabled device by any chance?
Some touch-enabled browsers or devices will slow down click events to allow for a delay, so the user can start a gesture instead of issuing a click. This would explain why, in your case, "mousedown" or "click" are slower than "mouseenter", which in a touch device happens as soon as you touch the element being monitored.
If this is the case, what I would do to improve responsiveness and be compatible in different types of devices, is binding both "mousedown" and "touchstart" (compatible with touch-enabled devices) to the code that must execute after the mouse press (or screen touch).
In your case:
$("button.showhide").bind('touchstart mousedown', function() {
$("#"+$(this).attr("id")+"-1").toggle()
});
I hope this helps.
Specifically Spidermonkey.
I know you write functions and attach them to events to handle them.
Where is the onClick handler defined and how does the JS engine know to fire onClick events when the user clicks?
Any keywords, design patterns, links, etc are appreciated.
UPDATE
Aggregating links I find useful here:
http://www.w3.org/TR/DOM-Level-2-Events/events.html
https://github.com/joyent/node/blob/master/src/node_events.cc
http://mxr.mozilla.org/mozilla/source/dom/src/events/nsJSEventListener.cpp
SpiderMonkey itself doesn't have anything involving event handling. Events are purely a DOM thing.
The click event is fired by the browser code (the thing embedding SpiderMonkey), not by SpiderMonkey itself. See http://hg.mozilla.org/mozilla-central/file/e60b8be7a97b/content/events/src/nsEventStateManager.cpp for the code that's responsible for dispatching things like click.
The browser is also what defines setter methods that take an assignment to the onclick property and turn it into an event listener registration. See http://hg.mozilla.org/mozilla-central/file/e60b8be7a97b/dom/base/nsDOMClassInfo.cpp#l7624 which is called from nsEventReceiverSH::SetProperty and handles properties whose name (id in this code) passes the IsEventName test.
When event listeners are registered and an event is fired, the event dispatcher manages calls to the listeners; the nsJSEventListener link you found is the glue that converts a C++ HandleEvent call into a call to a JS function.
So in your case, you want some sort of registration/unregistration mechanism for listeners and then your implementation will fire events and dispatch them to listeners. How you do this last part is pretty open-ended; the Gecko implementation has a lot of constraints due to needing to implement the DOM Events specification, but you should be able to do something much simpler.
HTML uses sink/bubble event propagation schema: http://catcode.com/domcontent/events/capture.html
There are "physical" events (mouse, keyboard) and logical/synthesized ones (focus,click, value_changed, etc.)
onClick is a logical event - generated as a result of mouse, touch and/or keyboard events.
Mouse (or finger touch) originated click event is a result of mouse down, move and up events. Note that mouse down, move and up are sinking/bubbling events. Target element(s) in these "primordial" events will be the target(or source) of the click event. If mouse-down/up events have different targets (DOM element) then their common parent is used.
Sequence of mouse down, move and up events may produce different logical events: click, swipe/scroll, etc.
I believe this is a full list of basic concepts.