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.
Related
I've been trying to understand how different pointer events (touch, mouse) are fired in various browsers/on various devices. On that purposed I have written a tiny webpage for testing events http://tstr.29pixels.net.
A few weeks later I've run into Mozilla's event listener test page at http://mozilla.github.io/mozhacks/touch-events/event-listener.html, which produced a very different results (I saw events fired that wasn't showing in my original test tool).
Both websites use different style of binding events, so I'd love to know, where is the difference in binding those events?
For example, pick up your tablet / smartphone with Chrome and try clicking the button on my web. In most cases two events are fired - touchstart and touchend (with occasional touchmove). Then try the Mozilla's tool. There is much more (even including click).
My binding:
$("#button").on('mouseenter mouseleave ... mousemove click', function(e){
...
}
Mozilla binding:
var events = ['MSPointerDown', 'MSPointerUp', ... , 'MSPointerCancel'];
var b = document.getElementById('button');
for (var i=0; i<events.length; i++) {
b.addEventListener(events[i], report, false);
}
These are just the most important parts, full javascript code is written right in the index page of both websites (it's not long).
If anyone could bring some light into this matter for me, I'd be very grateful.
jQuery also uses addEventListener internally. Depending on the event there might be some mapping or internal tweaks done by jQuery.
But the main difference between your code and the one of Mozilla is that you call e.preventDefault(); in your callback method, but Mozilla does not prevent the default behavior for the event.
Calling e.preventDefault(); will not only prevent the default behavior but as a result it will also prevent certain other event to occur. e.g. if you prevent mousedown or mousemove no dragevent will occur.
There's not much difference in how events are registered with the browser.
However, Mozilla just binds its handler to events that you don't listen to. Specifically, these are:
MSGotPointerCapture MSLostPointerCapture MSPointerCancel
blur focus
gotpointercapture lostpointercapture pointercancel
mousedown mouseup
mouseout
mouseover
touchenter touchleave
Since I'm searching for an answer for a while now and I'm still without any clue, I'll just describe my actual problem:
I need to build up automated touch/mouse gestures (tap,drag,pinch...) which I can fire on a webpage in order to test touch frameworks and their performance. Thus I want to trigger "global" touch/mouse events on a webpage with JavaScript without dispatching them from a specific element.
Does anyone know how I could achieve this or how these events are delegated in general?
If you need this just for the sake of emulating mobile touch actions on your browser, Chrome already has a tool for that. Check out Mobile Emulation.
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.
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.
Which events are the most resource intensive to have attached? Is a mouseover "worst" than a click? Are there any events that are known to be really harsh on the browser? I have my sights on IE7 mainly, as we are seeing performance issues there. We use event delegation where we can.
Or, how can I profile events which are actually running to determine which have the greatest impact on performance at runtime?
I'm interested in the events themselves, please don't tell me I need to go look into what my functions are doing in those events. Problems may exist there, but that's not my question.
So, to start with, events that fire more often can be more troublesome. So a mouseover event, which fires "continuously" as the mouse moves over an element, could cause a performance impact more easily than a click event, which can only fire as fast as the user can click.
However, it's the code you put in your handler that will have the real performance impact.
If firing speed is an issue, check out the excellent jQuery throttle/debounce plugin: https://github.com/cowboy/jquery-throttle-debounce
I'd imagine a callback's intensity is proportional to how many times it's called.
Events like mouseover or deviceorientation are more demanding than a click or similar 'one time' event.
The more an event have to check (and then throw) the more it consumes i.e. order from the max to the min:
mousemove throws an event at any move
mouseover throws an event at each move if pointing on a relevant item
mouseenter have to watch where is the cursor to then trow something
mouse click only throws an event when you click…