eventing on normal javascript objects using jquery

Based initially on http://stackoverflow.com/questions/9109895/using-jquery-to-allow-events-on-regular-js-objects

by Andy Bulka

HTML

Based initially on <a href="http://stackoverflow.com/questions/9109895/using-jquery-to-allow-events-on-regular-js-objects">this stackoverflow post</a>

<hr>
<div class="log">
    <a href="#" id="clearlog">Clear</a>
    <div id="log"></div>
</div>
<hr>
<p><input id="btn1" type="button" value="raise event"/></p>
<p>Hmm not much point since you can just as easily call methods on objects.  Eventing is good where you have an eventing pipeline and bubbling etc. but in pure javascript land you don't get any of that parent/child stuff.  </p>
<strike>Even looping through an array and triggering events is pointless, since you know who is in the array and are triggering each event explicitly - might as well just call a method.</strike> At least you can loop through an array using jquery in one zen line.<pre>$(arr).trigger("reportName"); </pre>
Possibly not a big deal, but at least its is a <strong>non looping broadcast</strong> (albiet underlying jquery implementation obviously loops).

CSS

input {width:auto; padding:2px;}

JavaScript

function msg(s) {
    $('<div/>').append(s).appendTo('#log');
}
$('#clearlog').click(function() {
    $("#log").empty();
});

// jquery eventing on regular objects

function do_stuff() { msg("dostuff"); }
        
function SomeObject() {
    var _value = 1;
    this.getValue = function() { return _value; }
    this.do_stuff = function() { msg("dostuff2"); }
}
        
var instance = new SomeObject();
$(instance).on("customEventName", function (e) {
    do_stuff();
    e.target.do_stuff();
})

// Later...
$(instance).trigger("customEventName");

// Perhaps an array will work too?  Broadcasting.

function Person(name) {
    var _name = name;
    this.get_name = function() { return _name; }
    this.do_stuff = function() { msg("my name is " + _name); }
}
        
/*
THESE WORK OK
        
$.each( { name: "John", lang: "JS" }, function(k, v){
  msg( "Key: " + k + ", Value: " + v );
});

var arr = [ "one", "two", "three", "four", "five" ];
$.each(arr, function(index, curritem) {
  msg(index + ' ' + curritem);
});
*/
        
//var arr = [Person("Fred"), Person("Mary"), Person("Sam")];
var p1 = new Person("Fred");
var p2 = new Person("Mary");
var arr = [p1, p2];
$.each(arr, function(index, curritem) {
    msg('hooking up ' + curritem.get_name());
    //$(curritem).on("reportName click", function (e) {
    $(curritem).on("reportName", function (e) {
      e.target.do_stuff();
    });
});
msg('------ now broadcasting --- ');
msg('------ triggering a single object, boring --- ');
$(p1).trigger("reportName");
msg('------ triggering each object in an array by looping, pointless --- ');
$.each(arr, function() {$(this).trigger("reportName"); });
msg('------ triggering each object in an array by single line call - nice --- ');
$(arr).trigger("reportName");  // one zen line
//$.trigger("reportName"); // can't do this

$('#btn1').click(function(){msg("click");});

msg('-------- ');


// Interesting article
//...