Mootools Mouse Events

by keif on July 29, 2008

Something I see brought up on occasion are people that do not understand the concept of addEvent:

  • Custom Native to allow all of its methods to be used with any DOM element via the dollar function .
  • These methods are also available on window and document.

And as shown on the new unofficial mootools mooforum –  people can get lost when we talk about mouseenter/mouseleave events – they are not Mootools Events, but generic javascript events with a slight tweak!

The difference between a Javascript Event and a Mootools Event

Instead of ‘onclick’ or ‘onsubmit’ or ‘onchange’ we do ‘click’, ‘submit’, ‘change’ – it’s a little syntax difference that people forget sometimes.

Just to clarify:

  1. // set the fade time and initially hide sub navs
  2. theSubNav.get(‘tween’).options.duration=1000;
  3. theSubNav.fade(‘hide’);
  4. // hover on causes sub nav to fade in
  5. theHover.addEvent(‘mouseover’, function(event) {
  6. event = new Event(event).stop();
  7. theSubNav.fade(‘in’);
  8. });
  9. // hover off causes sub nav to fade out
  10. theHover.addEvent(‘mouseout’, function(event) {
  11. event = new Event(event).stop();
  12. theSubNav.fade(‘out’);
  13. });

That is just like calling ‘onmouseover’ or ‘onmouseout’ – just the mootools way!

Comments on this entry are closed.

Previous post:

Next post: