I am checking for any interaction using JQuery's .one() function.
var myEvents = 'mousedown mousemove mouseup touchstart touchmove touchend mouseout';
jQuery(document).one(myEvents, function(){
//do something only once.
});
But I would like all these to be ubinded once any of these events has fired. I know I can unbind again with jQuery(document).unbind(myEvents), but was wondering if there was a clean inbuilt way of simply unbinding after one event.
EDIT: Here is a fiddle: http://jsfiddle.net/4HkQy/6/
You could extend jQuery with a function which serves exactly that purpose.
jQuery.fn.extend({
oneForAll: function(events, handler) {
var that = this,
oneForAll = function() {
that.unbind(events, oneForAll);
handler.apply(this, arguments);
};
that.on(events, oneForAll);
}
});
You would use it exactly the way you used one it would just be oneForAll.
JSFiddle: Demo
use .off()
jQuery(document).one('mousedown mousemove mouseup touchstart touchmove touchend mouseout', function (event) {
console.log(event.originalEvent.type);
jQuery('p').append(event.originalEvent.type);
//remove all handlers
jQuery(document).off('mousedown mousemove mouseup touchstart touchmove touchend mouseout');
});
But i would recommend using a namespaced handlers so that you won't remove any other event handlers by mistake.
jQuery(document).one('mousedown.myonce mousemove.myonce mouseup.myonce touchstart.myonce touchmove.myonce touchend.myonce mouseout.myonce', function (event) {
console.log(event.originalEvent.type);
jQuery('p').append(event.originalEvent.type);
//remove all handlers
jQuery(document).off('.myonce');
});
Demo: Fiddle
Related
This is a theoretical question... I have two mouseUp events. One of them is fired from a external jQuery plugin developed by other people that I'm using, this event is bound in this way:
//Add Events for mouse drag / touch swipe action
$(document).bind(self.event_up + self.id, { self: self }, self.mouseUp);
The other mouse up event, it's fired by me, using the standard code, something like this:
$(document).mouseup(function (e) {
}
});
My question is easy, sometimes one event is fired before the other, and sometimes the other event is fired before the other one.
Can somebody explain me if I have any options to bind the mouseUp event in some order?
$(document).unbind('mouseup');
$(document).bind(
"mouseup",
function( event ){
event.stopPropagation();
$.externalFunction(event);
yourFunction(event)
}
);
This is what you need.
Given this small bit of code:
window.addEventListener("test_event", function(e){
console.log("event fired");
}, false);
console.log("init");
$(window).trigger("test_event");
Why isn't the event triggered? Is jQuery doing something behind the scenes that is missed by a standard event handler?
http://jsfiddle.net/Dygerati/zx36aapj/1/
What you are looking to do is to dispatch a custom event: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
window.dispatchEvent(new Event("test_event"));
http://jsfiddle.net/zx36aapj/2/
Alternatively - if you can't modify the way the event is triggered you can use bind instead:
$(window).bind("test_event", function(e){
console.log("event fired");
});
console.log("init");
$(window).trigger("test_event");
Here's a link for that: http://jsfiddle.net/zx36aapj/3/
Is there a way to do.
$("#controlId").suspendEvents();
$("#controlId").resumeEvents();
I'm aware of preventDefault and stopPropagation. I want to do from outside the event.
Please consider the following in your answer.
I cannot modify these bound events.
I do not know the bound events (Although it will be possible it will take me long time to do it). so it is not possible to .off() and then add them back one by one.
I was able to put together answers from 2 other questions.
1.Bind an event handler to front of the queue
2.Attach handler to all events in a control
The idea is to bind an event handler with e.stopImmediatePropagation to front of the queue for all events. It seems crude i would be glad if this can be improved.
The solution...
$.fn.preBind = function (type, data, fn) {
this.each(function () {
var $this = $(this);
$this.bind(type, data, fn);
$.each(type.split(/ +/), function () {
var currentBindings = $this.data('events')[this];
if ($.isArray(currentBindings)) {
currentBindings.unshift(currentBindings.pop());
}
});
});
return this;
};
$.fn.suspendEvents = function () {
this.preBind("click keydown keyup keypress mouseover mouseenter mouseout mouseleave mousedown mouseup mousemove change blur focus focusin focusout scroll resize load unload beforeunload", null, blockEvents);
}
$.fn.resumeEvents = function () {
var _this = this;
$.each("click keydown keyup keypress mouseover mouseenter mouseout mouseleave mousedown mouseup mousemove change blur focus focusin focusout scroll resize load unload beforeunload".split(/ +/), function () {
_this.unbind(this, blockEvents);
});
}
function blockEvents(e) {
e.stopImmediatePropagation();
}
Now i could use
$("#controlId").suspendEvents();
$("#controlId").resumeEvents();
EDIT: Modified resumeEvents() to overcome IE issue.
everything bubbles up, so catch any event in body and prevent them.
alternative
var myCtlrs = $("all i want").attr("disabled", disabled");
then
myCtlrs.removeAttr("disabled");
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");
Is it possible to have keyboard event listener canvas.addEventListener('onkeydown', ev_keydown, false); like we have Mouse event Listeners
canvas.removeEventListener('mousedown', ev_mousedown, false);
canvas.addEventListener('mousedown', ev_mousedown, false);
in JavaScript.
If not then what would be the alternate?
Check if this works for you. Your sample line had the a prefix of on which is only used for IEs method attachEvent.
function listener(elem, evnt, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) // For IE
return elem.attachEvent("on" + evnt, func);
}
listener(document.getElementById('myCanvas'), 'keydown', ev_keydown);
jQuery offers a simple way to bind eventlisteners to DOMElements
and there are also eventlisteners for keyboard events here are some links
http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
http://api.jquery.com/keyup/
you can bind them to window and this should do what you want
you can also use your own method to bind events in a cross-browser compatible way
function bindEvent(e, typ, handler) {
if(e.addEventListener) {
e.addEventListener(typ, handler, false);
}else{
e.attachEvent('on'+typ, handler);
}
}
this should also allow you to bind the mentioned types of events