Question

I’m trying to reproduce Google Maps’ addListener except with jQuery listeners for clicks, keypresses, etc.

In Moogle Maps, you can write .event.addListener(map, 'click', function()... or replace ‘click’ with ‘drag’, ‘mouseover’, etc. For jQuery, I see a parallel with ‘click’, ‘keypress’, etc.

I’m stuck at the point where you could maybe pass the trigger type as a variable. It was straightforward to declare individual wrapper listeners, like

  function addClickListener(id, fn) {
    $(id).click(function() { fn(event); });
  }      

  // and

  function addKeyPressListener(id, fn) {
    $(id).keypress(function() { fn(event); });
  }

What I am looking for is broken, shown below. I can’t figure out how Google passes a String like ‘click’ and make that call a function. Maybe with eval? shudder

  function addListener(id, type, fn) {
    typeFn = $.type;
    $(id).typeFn(function() { fn(event); });
  }

Finally: http://jsfiddle.net/YCVVL/

Answer 1

I think you can use ‘square bracket notation‘ here:

function addListener(id, type, fn) {
    $(id)[type](function() { fn(event); }); //< here
}

Or use one of:

$(id).on(type, function() { fn(event); });
$(id).bind(type, function() { fn(event); });