Element.Event

A demo that shows the usage of: addEvents, fireEvent and custom events.

var txt = $('myTextarea'), log = $('log');
var fx = new Fx.Styles(log, {
	duration: 1500,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});
 
$('myTextarea').addEvents({
	'focus': function() {
		if (txt.value.contains('Type here')) txt.value = '';
	},
	'keyup': function() {
		if 	(txt.value.contains('hello'))	txt.fireEvent('burn', 'hello world!');
		else if (txt.value.contains('moo'))	txt.fireEvent('burn', 'mootools!');
		else if (txt.value.contains('pizza'))	txt.fireEvent('burn', 'Italy!');
		else if (txt.value.contains('burn'))	txt.fireEvent('burn', 'fireEvent');
		else if (txt.value.contains('delayed'))	txt.fireEvent('burn', "I'm a bit late!", 1000);
	},
	'burn': function(text) {
		txt.value = '';
		log.setHTML(text);
		fx.start({
			'background-color': ['#fff36f', '#fff'],
			'opacity': [1, 0]
		})
	}
});
<h3>Events</h3>
<p>This demo will show you how to: <span class="highlight">add multiple Events to an Element</span>, <span class="highlight">create custom Events</span> and <span class="highlight">fire an Event</span>.</p>
<p>In below textarea you can type whatever. Typing one of listed "Magic Words" will cause Event "burn" to fire and starting an effect (see js code)</p>
<p><span class="highlight">Magic Words</span>: <strong>hello</strong>, <strong>moo</strong>, <strong>pizza</strong>, <strong>burn</strong>, <strong>delayed</strong> (this last one will fire after 1 second).
<div id="inner_demo">
	<textarea id="myTextarea" name="textarea" cols="40" rows="6">Type here...</textarea>
</div>
<div id="log"><!-- spacer --></div>
textarea {
	float: left;
	background: #f8f8f8;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	padding: 0.3em;
	margin-top: 10px;
	overflow: auto;
}
 
#log {
	float: left;
	padding: 0.5em 0em 0.2em;
	margin-left: 10px;
	width: 290px;
	height: 50px;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	margin-top: 10px;
	visibility: hidden;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}
 
span.highlight { 
	background-color: #E0ECEF;
}

Events

This demo will show you how to: add multiple Events to an Element, create custom Events and fire an Event.

In below textarea you can type whatever. Typing one of listed "Magic Words" will cause Event "burn" to fire and starting an effect (see js code)

Magic Words: hello, moo, pizza, burn, delayed (this last one will fire after 1 second).