Ideally I can do $(document.body).on("tap", "#myElement", this.eventHandler);
But jQuery hasn't done that yet.
I see so many libraries -- https://github.com/bebraw/jswiki/wiki/Touch. There's a long list on that page.
They all seem to use old fashioned event listening. Such as, $("#element").touchLibraryThingy(); $("#element").bind("tap"). Equivalent to addEventListener.
That's great for an ID (Sorta), but when I have 50 list items that all have events on them, I don't want someone on an old Android to have 50 event listeners. For performance reasons!
Does anyone know of a library that uses event delegation that is finished?
This stackoverflow question is similar but doesn't come to truth -- Extend jQuery's .on() to work with mobile touch events
Looks like the blob mentioned in the post Extend jQuery's .on() to work with mobile touch events actually does the trick... almost.
Link to library! https://github.com/jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js
The gotcha
"tap" on desktop doesn't prevent default it seems. I had odd scrolling behavior and choppy menu animation in my web app.
To fix this I created a global property inside my app's namespace:
var R = window.R = window.R || {};
R.touchEvent = ('ontouchstart' in window') ? "tap" : "click";
window.$body = $(document.body);
Then all my event listeners do this:
$body.on(R.touchEvent, ".myHellaLongListItems", this.eventHandler);
Done! Now we all can have a really nice mobile website.
Better yet, now with jQuery Mobile custom builder, you can only select their mobile events and get the latest touch code, which has improvements over the example above.
http://jquerymobile.com/download-builder/
Related
In my (javascript, jQuery) code, I use two ways of firing events
jQuery('body').trigger('crazy-trigger-event');
jQuery("body").get(0).dispatchEvent(new CustomEvent("crazy-dispatch-event"));
In the snippet here:
http://jsfiddle.net/jts9jhbt/3/
I have registered for custom events using both jQuery .on() and the DOM .addEventListener() methods.
Then I fire the events using both jQuery .trigger() and DOM .dispatchEvent() methods.
It seems like the listeners registered using .on() receive events fired both ways.
But the listeners registered with .addEventListener() only receive events fired using .dispatchEvent().
My use case is that I have a mix of legacy code and jQuery code, and it seems like it's safest to use .dispatchEvent() so that it's compatible with both.
So is there some change to the code I can make so that listeners registered with .addEventListener() can recieve events from .trigger() ?
Simple Answer
No, you can't.
Explanation
The main reason is that jQuery needs to work across multiple browsers and ...
"[...] jQuery's event system is a layer on top of the DOM event system."
Eventhough there are exceptions, there is no efficient way for jQuery to know which events are supported by the browser currently due to the lack of a getEventListeners method.
The developers think that the creation of a solution
"[...] isn't possible to do without breaking existing code or causing performance issues."
If that sounds like a challenge to anybody, you are free to prove them wrong by posting your solution.
The detailed explanation can be found in Dave Methvin's answers to jQuery's issue #2476.
I recently realized that the checkboxes take really long to respond to tapping. I am already using fastclick.js to remove the 300ms slowness caused by mobile devices waiting for double tapping.
I noticed that jQuery mobile uses some kind of technique to completely remove the lag when tapping multiple checkboxes very quickly. From what I have read elsewhere there seems to be a problem with mobiles when using click events rather than tap events, but haven't been able to find code to achieve this anywhere.
I would use a custom jQuery mobile build to take advantage of this, but what I am working on is already too heavy, so having the code that replaces click with tap for mobile, I would be really grateful!
The best approach is to use a library that handles touch events. There are many including these:
Hammer.js - 3kb gzipped
Zepto.js - 9.2kb gzipped
Quojs - 6kb gzipped
jGestures
Zepto is like a mini-jQuery and does a lot more than touch events, however it is designed in nice modules, one of which is the touch events module. One option if you don't want to include an entire library and you are using jQuery is to only include the touch module from zepto. Try using this code from github taking care to replace the last line from })(Zepto) to })(jQuery) and it should just work.
Some googling found this related SO question, with some good answers:
How to use jQuery Mobile for its touch event support only (no UI enhancements)?
Hi I am making a JQM and PhoneGap app. I would like to catch events like "pause","restart" or resume. Do you know how to do this? I read docs, but there are no clues how to do it in javascript code for phonegap build.
Thanks.
In the documentation for the events, they give a full example as well as a short example, which I'll reproduce here:
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
Just like in normal JavaScript, you can attach to events using the addEventListener method on any node. In the case of PhoneGap, their device events are triggered on the document object.
If I understand you correctly and JQM means jQuery Mobile: In jQuery, it's possible to add handlers for arbitrary events by using:
$(document).on('pause', onPause);
(This uses the jQuery 1.7 syntax, but I believe that's a requirement for jQuery Mobile).
I was playing around with JavaScript a little while ago, and it irritated me that I couldn't create my own event.
I've seen Framework's with this built in (jQuery, MooTools, Prototype. Dojo doesn't which is weird because it seems to do everything and your laundry) and I actually built my own system for creating and firing custom events.
It just feels like there should be a native way to do it. Does anyone know how to do this/if you even can?
var dragEvent = document.createEvent("Event");
dragEvent.initEvent("dragged", true, true);
el.dispatchEvent(dragEvent);
For official specs, see DOM Level 2 Events. See also createEvent(), initEvent() / initMouseEvent() / initUIEvent(), and dispatchEvent() at MDC.
I use this technique to create custom drag and resize events for communication on this sample page.
I can add or remove an event handler for a DOM node. Is it possible to find out all the registered events handlers of a given DOM node? I am referring to straight Javascript meaning no frameworks or toolkits like jQuery, dojo, Prototype, GWT, etc. If the answer is no, any reason why? Security issues?
I know this is an old question, but just in case, for chrome you can use getEventListeners
getEventListeners function
as mentioned here:
https://stackoverflow.com/a/17466308/538752
DOM Level 3 specifies eventListenerList - however, I'm not aware of any DOM implementation which supports this - or any other reliable way to list the event listeners. It seems to have been an oversight to this point.
This works for Chrome/Safari console:
getEventListeners(document.getElementByID('myElementId'));
Visual Event can show you which events are registered, but it only works with DOM level 0 attached events; the W3C level 2 implementation as well as the Internet Explorer proprietary method are not supported and/or cannot be retrieved.
If your interest is to discover some event, in order to disable it - I came here because of that - I recommend to use the Firebug extension, with Mozilla Firefox. Selecting the part of the document, you are interested in, look at the right panel, the Events tab: you will see all events, and can even disable them.
Also, in Google Chrome, please select the element and notice the number, it will show you $0 or any other number.
Then in console, type this code and press enter.
getEventListeners($0)
and then you will see the result. Please see the image below for more elaboration.
I faced the same problem, landed here, and didn't find an useful answer.
In case you can execute script before addEventListener calls from other parties, you might do something really dirty like:
var obj = something; // Your DOM element you want to watch
var beforeAddEvent = obj.addEventListener;
obj.addEventListener = function() {
// Do something with arguments here (like storing in an array)
// arguments[0]: event name
// arguments[1]: Listener function
// arguments[3]: eventual options passed
// If you don't call this, the event listener won't even be attached, it might be also useful in some case
beforeAddEvent.apply(obj, arguments);
};