I'm looking for some input on how to implement custom eventhandling in jquery the best way. I know how to hook up events from the dom elements like 'click' etc, but I'm building a tiny javascript library/plugin to handle some preview functionality.
I've got a script running to update some text in a dom element from a set of rules and data/user input I got, but now I need that same text shown in other elements that this script can't possibly know of. What I need is a good pattern to somehow observe this script producing the needed text.
So how do I do this? Did I overlook some builtin functionality in jquery to raise/handle user events or do I need some jquery plugin to do it? What do you think is the best way/plugin to handle this?
Here is how I author custom events:
var event = jQuery.Event('customEventName');
$(element).trigger(event);
Granted, you could simply do
$(element).trigger('eventname');
But the way I wrote allows you to detect whether the user has prevented default or not by doing
var prevented = event.isDefaultPrevented();
This allows you to listen to your end-user's request to stop processing a particular event, such as if you click a button element in a form but do not want to the form to post if there is an error.
I then usually listen to events like so
$(element).off('eventname.namespace').on('eventname.namespace', function () {
...
});
Once again, you could just do
$(element).on('eventname', function () {
...
});
But I've always found this somewhat unsafe, especially if you're working in a team.
There is nothing wrong with the following:
$(element).on('eventname', function () {});
However, assume that I need to unbind this event for whatever reason (imagine a disabled button). I would then have to do
$(element).off('eventname', function () {});
This will remove all eventname events from $(element). You cannot know whether someone in the future will also bind an event to that element, and you'd be inadvertently unbinding that event as well
The safe way to avoid this is to namespace your events by doing
$(element).on('eventname.namespace', function () {});
Lastly, you may have noticed that the first line was
$(element).off('eventname.namespace').on('eventname.namespace', ...)
I personally always unbind an event before binding it just to make sure that the same event handler never gets called multiple times (imagine this was the submit button on a payment form and the event had been bound 5 times)
The link provided in the accepted answer shows a nice way to implement the pub/sub system using jQuery, but I found the code somewhat difficult to read, so here is my simplified version of the code:
$(document).on('testEvent', function(e, eventInfo) {
subscribers = $('.subscribers-testEvent');
subscribers.trigger('testEventHandler', [eventInfo]);
});
$('#myButton').on('click', function() {
$(document).trigger('testEvent', [1011]);
});
$('#notifier1').on('testEventHandler', function(e, eventInfo) {
alert('(notifier1)The value of eventInfo is: ' + eventInfo);
});
$('#notifier2').on('testEventHandler', function(e, eventInfo) {
alert('(notifier2)The value of eventInfo is: ' + eventInfo);
});
I think so.. it's possible to 'bind' custom events, like(from: http://docs.jquery.com/Events/bind#typedatafn):
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
I think so.. it's possible to 'bind' custom events, like(from: http://docs.jquery.com/Events/bind#typedatafn):
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
I had a similar question, but was actually looking for a different answer; I'm looking to create a custom event. For example instead of always saying this:
$('#myInput').keydown(function(ev) {
if (ev.which == 13) {
ev.preventDefault();
// Do some stuff that handles the enter key
}
});
I want to abbreviate it to this:
$('#myInput').enterKey(function() {
// Do some stuff that handles the enter key
});
trigger and bind don't tell the whole story - this is a JQuery plugin. http://docs.jquery.com/Plugins/Authoring
The "enterKey" function gets attached as a property to jQuery.fn - this is the code required:
(function($){
$('body').on('keydown', 'input', function(ev) {
if (ev.which == 13) {
var enterEv = $.extend({}, ev, { type: 'enterKey' });
return $(ev.target).trigger(enterEv);
}
});
$.fn.enterKey = function(selector, data, fn) {
return this.on('enterKey', selector, data, fn);
};
})(jQuery);
http://jsfiddle.net/b9chris/CkvuJ/4/
A nicety of the above is you can handle keyboard input gracefully on link listeners like:
$('a.button').on('click enterKey', function(ev) {
ev.preventDefault();
...
});
Edits: Updated to properly pass the right this context to the handler, and to return any return value back from the handler to jQuery (for example in case you were looking to cancel the event and bubbling). Updated to pass a proper jQuery event object to handlers, including key code and ability to cancel event.
Old jsfiddle: http://jsfiddle.net/b9chris/VwEb9/24/
It is an old post, but I will try to update it with a new information.
To use custom events you need to bind it to some DOM element and to trigger it. So you need to use
.on() method takes an event type and an event handling function as arguments. Optionally, it can also receive event-related data as its second argument, pushing the event handling function to the third argument. Any data that is passed will be available to the event handling function in the data property of the event object. The event handling function always receives the event object as its first argument.
and
.trigger() method takes an event type as its argument. Optionally, it can also take an array of values. These values will be passed to the event handling function as arguments after the event object.
The code looks like this:
$(document).on("getMsg", {
msg: "Hello to everyone",
time: new Date()
}, function(e, param) {
console.log( e.data.msg );
console.log( e.data.time );
console.log( param );
});
$( document ).trigger("getMsg", [ "Hello guys"] );
Nice explanation can be found here and here. Why exactly this can be useful? I found how to use it in this excellent explanation from twitter engineer.
P.S. In plain javascript you can do this with new CustomEvent, but beware of IE and Safari problems.
The link provided in the accepted answer shows a nice way to implement the pub/sub system using jQuery, but I found the code somewhat difficult to read, so here is my simplified version of the code:
$(document).on('testEvent', function(e, eventInfo) {
subscribers = $('.subscribers-testEvent');
subscribers.trigger('testEventHandler', [eventInfo]);
});
$('#myButton').on('click', function() {
$(document).trigger('testEvent', [1011]);
});
$('#notifier1').on('testEventHandler', function(e, eventInfo) {
alert('(notifier1)The value of eventInfo is: ' + eventInfo);
});
$('#notifier2').on('testEventHandler', function(e, eventInfo) {
alert('(notifier2)The value of eventInfo is: ' + eventInfo);
});
I had a similar question, but was actually looking for a different answer; I'm looking to create a custom event. For example instead of always saying this:
$('#myInput').keydown(function(ev) {
if (ev.which == 13) {
ev.preventDefault();
// Do some stuff that handles the enter key
}
});
I want to abbreviate it to this:
$('#myInput').enterKey(function() {
// Do some stuff that handles the enter key
});
trigger and bind don't tell the whole story - this is a JQuery plugin. http://docs.jquery.com/Plugins/Authoring
The "enterKey" function gets attached as a property to jQuery.fn - this is the code required:
(function($){
$('body').on('keydown', 'input', function(ev) {
if (ev.which == 13) {
var enterEv = $.extend({}, ev, { type: 'enterKey' });
return $(ev.target).trigger(enterEv);
}
});
$.fn.enterKey = function(selector, data, fn) {
return this.on('enterKey', selector, data, fn);
};
})(jQuery);
http://jsfiddle.net/b9chris/CkvuJ/4/
A nicety of the above is you can handle keyboard input gracefully on link listeners like:
$('a.button').on('click enterKey', function(ev) {
ev.preventDefault();
...
});
Edits: Updated to properly pass the right this context to the handler, and to return any return value back from the handler to jQuery (for example in case you were looking to cancel the event and bubbling). Updated to pass a proper jQuery event object to handlers, including key code and ability to cancel event.
Old jsfiddle: http://jsfiddle.net/b9chris/VwEb9/24/
Here is how I author custom events:
var event = jQuery.Event('customEventName');
$(element).trigger(event);
Granted, you could simply do
$(element).trigger('eventname');
But the way I wrote allows you to detect whether the user has prevented default or not by doing
var prevented = event.isDefaultPrevented();
This allows you to listen to your end-user's request to stop processing a particular event, such as if you click a button element in a form but do not want to the form to post if there is an error.
I then usually listen to events like so
$(element).off('eventname.namespace').on('eventname.namespace', function () {
...
});
Once again, you could just do
$(element).on('eventname', function () {
...
});
But I've always found this somewhat unsafe, especially if you're working in a team.
There is nothing wrong with the following:
$(element).on('eventname', function () {});
However, assume that I need to unbind this event for whatever reason (imagine a disabled button). I would then have to do
$(element).off('eventname', function () {});
This will remove all eventname events from $(element). You cannot know whether someone in the future will also bind an event to that element, and you'd be inadvertently unbinding that event as well
The safe way to avoid this is to namespace your events by doing
$(element).on('eventname.namespace', function () {});
Lastly, you may have noticed that the first line was
$(element).off('eventname.namespace').on('eventname.namespace', ...)
I personally always unbind an event before binding it just to make sure that the same event handler never gets called multiple times (imagine this was the submit button on a payment form and the event had been bound 5 times)
Source: Stackoverflow.com