Custom events in jquery?

Question

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?

Answer 1

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" ]);
    });

Answer 2

take a look at this

Trigger and Bind What is exciting though (or at least what is exciting me) is the method by which the status gets relayed through the application. I’ve stumbled upon a largely un-discussed method of implementing a pub/sub system using jQuery’s trigger and bind methods.

Answer 3

From: http://www.reynoldsftw.com/2009/04/custom-events-in-jquery-open-doors-to-complex-behaviors/

A quick recap of .bind() and .trigger()

$('body').bind('foo', { 'bar' : 'bam' }, function(e) { alert(e.data.bar); });
$('body').trigger('foo'); // alerts 'bam'

You can also pass params

$('body').bind('foo', function(e, param1, param2) { alert(param1 + ': ' + param2); });
$('body').trigger('foo', [ 'bar', 'bam' ]); // alerts 'bar: bam'