Add multiple Events to an Element, create custom Events and fire an Event

 

<!--
MooTools is released under the Open Source MIT license, 
which gives you the possibility to use it and modify 
it in every circumstance. 
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style rel="stylesheet" type="text/css">
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;
}  
  
  </style>
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript">
window.addEvent('domready', function() {
  var textarea = $('myTextarea'), log = $('log');
  
  // We define the highlight morph we're going to
  // use when firing an event
  var highlight = new Fx.Morph(log, {
    duration: 1500,
    link: 'cancel',
    transition: 'quad:out'
  });
   
  // Here we start adding events to textarea.
  // Note that 'focus' and 'keyup' are native events, while 'burn'
  // is a custom one we've made
  textarea.addEvents({
    focus: function() {
      // When focusing, if the textarea contains value "Type here", we
      // simply clear it.
      if (textarea.value.contains('Type here')) textarea.value = '';
    },
    
    keyup: function() {
      // When user keyups we check if there are any of the magic words.
      // If yes, we fire our custom event burn with a different text for each one.
      if   (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
      else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
      else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
      else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
      // note that in case of 'delayed', we are firing the event 1 second late.
      else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
    },
    
    burn: function(text) {
      // When the textarea contains one of the magic words
      // we reset textarea value and set the log with text
      textarea.value = ''; log.set('html', text);
      
      // then we start the highlight morphing
      highlight.start({
        backgroundColor: ['#fff36f', '#fff'],
        opacity: [1, 0]
      });
    }
  });
});  
  </script>
  <title>Elements Event Demo</title>
</head>
<body>
  <h1>Events</h1>
  <h2>Introduction</h2>
  <p>
    This demo will show you how to: add multiple Events to an Element, create custom Events and fire an Event.
  </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>
    Magic Words to type: <strong>hello</strong>, <strong>moo</strong>, <strong>pizza</strong>, <strong>burn</strong>, <strong>delayed</strong> (this last one will fire after 1 second).
  </p>
  <div id="inner_demo">
    <textarea id="myTextarea" name="textarea" cols="40" rows="6">Type here...</textarea>
  </div>
  <div id="log">
    <!-- spacer -->
  </div>
</body>
</html>
Related examples in the same category

With MooTools it is easy to define often used actions as custom events for elements
Add multiple Events to an Element, create custom Events and fire an Event : Action « Mootools « JavaScript DHTML

Related examples in the same category
