Create Custom Events in MooTools 1.2
Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets.
The MooTools JavaScript
/* click - control event */
Element.Events.altClick = {
base: 'click',
condition: function(event) {
return event.alt; // alt key?
}
};
/* usage */
window.addEvent('domready',function() {
var ccs = 0, acd = $('alt-click-div');
acd.addEvent('altClick',function() {
acd.set('text','You have alt-clicked me ' + (++ccs) + ' times');
});
});
What's great about creating custom events in MooTools is that you need to give the Element.Events object as little information as you could imagine: a base to listen for the custom event for and a condition property that you return a Boolean value from if the condition matches your desired event.
When would you use alt-click? Maybe in my MooTools ContextMenu plugin? Do you have any custom events you live by?
![Interview with a Pornhub Web Developer]()
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Redacted Font]()
Back when I created client websites, one of the many things that frustrated me was the initial design handoff. It would always go like this:
Work hard to incorporate client's ideas, dream up awesome design.
Create said design, using Lorem Ipsum text
Send initial design concept to the client...
![Sexy Album Art with MooTools or jQuery]()
The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web.
The XHTML
A few structure DIVs and the album information.
The CSS
The CSS...
I use custom events in a lot of the classes i write. more complex tools i tend to break into multiple classes… like a slideshow might have a SlideShowManager class, and then it manages instances of a SlideClass. The Slide class will take the “controller” as an argument in its init function, and i have slides listen to custom events that the controller fires. I’ve found this helps keep the flow of the tool a lot cleaner and leaves less room for weird glitches or unusual logic… The manager might do something like this in a function:
this.fireEvent(‘onSlideSelect’, [slideId, blah, blah])
The slides that are listening can identify if they need to respond by comparing their ID to the slideId thats passed.
I might be missing something obvious but it doesn’t seem to work in OSX.
he’s right, it doesn’t work on OSX david ! :(
Thanks for the update guys. I wonder if it has something to do with Mac’s “option” key. I don’t develop on Macs — I’ll look for a solution though!
Yeah, OSX doesn’t pass the
ctrlKeyproperty of aneventever so ifevent.controlis reading from that directly it won’t work. A cross browser implementation would probably need to listen for thekeycodeofctrland set the event’sctrlKeyproperty totrueif it is down.That would mean listening for key presses on the whole document though, so it wouldn’t be worth it unless you really needed the functionality.
ps.
altKeyseems to work fine!@adamnfish: Thanks. I’ve changed to the ALT key and it works perfectly. I’ll research the “control” issue further. Someone metioned that control-click is the same as right-click on a Mac, but I’ve yet to verify.
Element.Events.konami = { base: 'keyup', condition: function(e){ $clear(this.retrieve('konami_timeout')); var input = this.retrieve('konami_input',[]); input.push(e.key); if (input.join(',') == "up,up,down,down,left,right,left,right,b,a,enter"){ this.removeEvents('konami'); return true; } this.store('konami_input',input).store('konami_timeout',(function(){this.eliminate('konami_input');}).delay(2000,this)); } };Hi David, you have to check meta key for mac. Another event extension:
Event.implement({ uberControlPressed: function() { return Browser.Platform.mac ? this.meta : this.control; } });Awesome Daniel!
Nice, but ALT+click does not work on Linux LOL! I know, is very hard to write scripts crossbrowser. The problem is not Linux exactly, is because ALT+Click is an event for Drag&Drop the windows on the Gnome Desktop from any part of these. I do not know if this happens too on KDE.
But, I tested with control key and works fine. Nice tip David, I’m gonna put it on the practice right now.
David, it work now on macOSX with firefox3 and the Alt-Click :)
olivier: Awesome!
Hi David,
There is a conflict between your alt+click and FlashGet Download Manager.