MooTools Demos - Element.Event.Pseudos

Element.Event.Pseudos

This demo will show you how to use the provided :once pseudo event and how to create a custom pseudo event.

<h2>Only fires once:</h2>
<a href="#" id="clickOnce">Click me and I'll just fire once and no more!</a>

<h2><code>:alt</code> Pseudo</h2>

<p>Hold the <code>Alt</code> key and click a block to toggle the <code>.active</code> class.</p>

<h2>Multiple Pseudos</h2>

This demo uses the <code>keydown:relay(textarea):keys(enter):once</code> event:

<div id="multiplePseudoText">
	<textarea>Press the enter key</textarea>
</div>

<h2><code>:pause</code> Pseudo</h2>

<p>
	This Pseudo Event prevents the event function from firing immediately after
	every keystroke. <code>:pause</code> instead waits for a pause in keystrokes of
	a optional amount of time (in milliseconds) to pass before firing. This is for
	example very useful when you want to validate the field when the user is
	ready typing, or if you do some Requests in an efficient way.
</p>

window.addEvent('domready', function() {

// `:once` psuedo event provided by mootools-more
	$('clickOnce').addEvent('click:once', function(event){
		event.stop();

this.set('tween', {
			transition: 'bounce:out',
			duration: 'long'
		}).tween('margin-left', 300);
	});

// we can define our own pseudo events as well, for example to check for the alt key
	DOMEvent.definePseudo('alt', function(split, fn, args){
		// args[0] is the Event instance
		if(args[0].alt) fn.apply(this, args);
	});

// apply the psuedo event to some elements
	$$('.item').addEvent('click:alt', function(){
		this.toggleClass('active');
	});

// use multiple pseudos
	$('multiplePseudoText').addEvent('keydown:relay(textarea):keys(enter):once', function(event, el){
		el.set('value', 'MooTools!!').highlight();
	});

// pause pseudo event, you can define the pause, otherwise it will use the default (250)
	var spinner = $('spinner').setStyle('opacity', 0).set('tween', {
		link: 'chain'
	});
	$('pauseEvent').addEvent('keydown:pause(200)', function(){
		spinner.get('tween').cancel();
		spinner.fade(1).pauseFx(400).fade(0);
	});

});

Demo
Docs
CSS
HTML
JavaScript

Only fires once:

Click me and I'll just fire once and no more!

`:alt` Pseudo

Hold the Alt key and click a block to toggle the .active class.

Multiple Pseudos

This demo uses the keydown:relay(textarea):keys(enter):once event:

`:pause` Pseudo

This Pseudo Event prevents the event function from firing immediately after every keystroke. :pause instead waits for a pause in keystrokes of a optional amount of time (in milliseconds) to pass before firing. This is for example very useful when you want to validate the field when the user is ready typing, or if you do some Requests in an efficient way.

Documentation References:

<h2>Only fires once:</h2>
<a href="#" id="clickOnce">Click me and I'll just fire once and no more!</a>

<h2><code>:alt</code> Pseudo</h2>

<p>Hold the <code>Alt</code> key and click a block to toggle the <code>.active</code> class.</p>

<h2>Multiple Pseudos</h2>

This demo uses the <code>keydown:relay(textarea):keys(enter):once</code> event:

<div id="multiplePseudoText">
	<textarea>Press the enter key</textarea>
</div>

<h2><code>:pause</code> Pseudo</h2>

window.addEvent('domready', function() {

// `:once` psuedo event provided by mootools-more
	$('clickOnce').addEvent('click:once', function(event){
		event.stop();

this.set('tween', {
			transition: 'bounce:out',
			duration: 'long'
		}).tween('margin-left', 300);
	});

// apply the psuedo event to some elements
	$$('.item').addEvent('click:alt', function(){
		this.toggleClass('active');
	});

// use multiple pseudos
	$('multiplePseudoText').addEvent('keydown:relay(textarea):keys(enter):once', function(event, el){
		el.set('value', 'MooTools!!').highlight();
	});

});

MooTools

Demos

Slick

Drag and Drop

Effects

Events

Request

Plugins

Element.Event.Pseudos

Only fires once:

`:alt` Pseudo

Multiple Pseudos

`:pause` Pseudo

Documentation References:

MooTools

Demos

Slick

Drag and Drop

Effects

Events

Request

Plugins

Element.Event.Pseudos

Only fires once:

:alt Pseudo

Multiple Pseudos

:pause Pseudo

Documentation References:

`:alt` Pseudo

`:pause` Pseudo