processors

  • property
can.Control.processors

{Object<can.Control.processor(element, eventName, selector, handler, control)>}

 

A collection of hookups for custom events on Controls.

Object<can.Control.processor(element, eventName, selector, handler, control)>

processors is an object that allows you to add new events to bind to on a control, or to change how existent events are bound. Each key-value pair of processors is a specification that pertains to an event where the key is the name of the event, and the value is a function that processes calls to bind to the event.

The processor function takes five arguments:

  • el: The Control's element.
  • event: The event type.
  • selector: The selector preceding the event in the binding used on the Control.
  • callback: The callback function being bound.
  • control: The Control the event is bound on.

Inside your processor function, you should bind callback to the event, and return a function for can.Control to call when callback needs to be unbound. (If selector is defined, you will likely want to use some form of delegation to bind the event.)

Here is a Control with a custom event processor set and two callbacks bound to that event:

can.Control.processors.birthday = function(el, ev, selector, callback, control) {
  if(selector) {
    myFramework.delegate(ev, el, selector, callback);
    return function() { myFramework.undelegate(ev, el, selector, callback); };
  } else {
    myFramework.bind(ev, el, callback);
    return function() { myFramework.unbind(ev, el, callback); };
  }
};

can.Control("EventTarget", { }, {
  'birthday': function(el, ev) {
    // do something appropriate for the occasion
  },
  '.grandchild birthday': function(el, ev) {
    // do something appropriate for the occasion
  }
});

var target = new EventTarget('#person');

When target is initialized, can.Control will call can.Control.processors.birthday twice (because there are two event hookups for the birthday event). The first time it's called, the arguments will be:

  • el: A NodeList that wraps the element with id 'person'.
  • ev: 'birthday'
  • selector: ''
  • callback: The function assigned to ' birthday' in the prototype section of EventTarget's definition.
  • control: target itself.

The second time, the arguments are slightly different:

  • el: A NodeList that wraps the element with id 'person'.
  • ev: 'birthday'
  • selector: '.grandchild'
  • callback: The function assigned to '.grandchild birthday' in the prototype section of EventTarget's definition.
  • control: target itself.

can.Control already has processors for these events:

  • change
  • click
  • contextmenu
  • dblclick
  • focusin
  • focusout
  • keydown
  • keyup
  • keypress
  • mousedown
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • reset
  • resize
  • scroll
  • select
  • submit