Defines pseudo events like :once
or :throttle' as well as the
definePseudo` method to create your own.
Demo
The event will only fire once. The once pseudo will remove itself after the first excecution.
Example:
myElement.addEvent('click:once', function(){
alert('you clicked me');
});
// If the user clicks the element twice, it will only once alert 'you clicked me'
Note:
This is exactly the same as the Events.Pseudos :once pseudo event.
Makes sure the event is not fired more than once in a certain timespan. This is especially useful for events that might fire a lot, like the scroll, resize or keydown events. To get better performance instead of executing a heavy function, like Request a lot of times, the event only fired once in, for example, 250 milliseconds.
The default timespan is 250 milliseconds.
Example:
$('myElement').addEvent('scroll:throttle', function(){
// Will only fire once every 250 ms
});
window.addEvent('resize:throttle(400)', function(){
// Will only fire once every 400 ms
});
Note:
This is exactly the same as the Events.Pseudos :throttle pseudo event.
The event is only fired when the original event is not fired again in the given time. So when the first event is fired, and a second after 100 ms, the first event is cancelled and only the second is fired. This is useful for example with field autocompletion which uses Request.
The default pausetime is 250 milliseconds.
Example:
$('myElement').addEvent('keydown:pause', function(){
// Default time is 250 ms
});
$('myElement').addEvent('keydown:pause(100)', function(){
// The pause time is now 100 ms.
});
Note:
This is exactly the same as the Events.Pseudos :pause pseudo event.
It's possible to define your own pseudos with DOMEvent.definePseudo
Syntax
DOMEvent.definePseudo(name, fn);
Arguments:
- name - (string) The pseudo name, for example
once
will becomeclick:once
- fn - (function) The function that will get fired when the event is fired. This function should decide what will happen with the event, for example execute the event and remove the event
Signature:
fn(split, fn, args){
- split - (object) a parsed object of the
event:pseudo(value)
string- event - (string) the part before the
:
- value - (string) between
(
and)
- pseudo - (string) between the
:
and(
- original - (string) the original event name, thus
event:pseudo(value)
- event - (string) the part before the
- fn - (function) This is the function that has been passed in the
addEvent
method. So it is the 'fn' inmyEvent.addEvent('event:pseudo', fn)
- args - (array) An array with arguments. The DOMEvent object is in most cases the first element.
The this
variable refers to the Element where the event is added to.
Example
This is how the :once pseudo is implemented
DOMEvent.definePseudo('once', function(split, fn, args){
fn.apply(this, args);
this.removeEvent(split.original, fn);
});