Implement jQuery’s hover() Method in MooTools

Discussion

1. Chris

   Sorry Bro, but this is completely useless. There is no need for a “hover”-method with a sloppy API like jQuery has (there is clearly no point in “argument one is hover event and argument two is the mouseout event”).

   After all, the mootools approach isn’t really significantly more to write but it gives you more flexibility and more meaningful code:

   el.addEvents({
     mouseenter: fn,
     mouseleave: fn2
   });
   

   Also, by doing it the “mootoolsian”-way you can remove the events if you want or need to by doing el.removeEvent('mouseenter', fn).
2. EmEhRKay

   @Chris

   I like this, but after reading your reply I do agree with you. The reason why I like it is that it shows how flexible MooTools is — There is [almost] nothing that MooTools cannot do that other libs can. The thing that makes hover() less MooTools and more jQuery is the autobinding.

   Great post though.
3. Chris

   MooTools automatically binds every function to the element unless the function is bound already.

   Consider this example:

   var fn = function(){ console.log(this); };
   el.addEvent('click', fn);
   el.addEvent('click', fn.bind(someOtherElement));
   

   The first example will log the element and the second one will be bound to “someOtherElement”. We have it all!
4. David Walsh

   I see your point guys — I created this because it simply gives the dev a shorter way to accomplish something. It may also help jQuery users who are moving to Moo by making things a little bit more simple.
5. EmEhRKay

   Chris, that would be true if David’s code was written as it were in your first post, but the function with the action is enclosed inside of the anonymous (already bound) function.
6. Lim Chee Aun

   This looks kinda familiar :) http://code.google.com/p/mooj/source/browse/trunk/mooj.js#83
7. David Walsh

   Damn Lim, I had forgotten about Mooj. You need to do a series of articles on that thing.
8. Corey

   Chris, you can do the same in jQuery also, you don’t have to use hover().

   el.mouseover(fn).mouseout(fn2);
9. Aaron Newton

   As an exercise in demonstrating how easy it is to add your own syntax to MooTools, I think this post is totally fine and appropriate. None of us would ever do this for all the reasons pointed out in the comments above.

   My only comment is that it should return this for chaining:

   Element.implement({
       'hover': function(fn1,fn2) {
           return this.addEvents({
               'mouseenter': function(e) {
                   fn1.attempt(e,this);
               },
               'mouseleave': function(e) {
                   fn2.attempt(e,this);
               }
           })
       }
   });
   
10. Peter Higgins

    So I have to throw in my $0.02US —

    I implement this for Dojo based on the same “wow, why do people get so excited about an API that already exists” … but I changed the .hover() API some:

    hover: function(over, out){
         return this.onmouseenter(over).onmouseleave(out || over);
    }
    

    allowing you to do one function for both states:

    dojo.query(".blah").hover(function(e){ 
      // is e.type mouseover or mouseleave ? decide
    });
    

    Though I put it in my “mini lib” plugd:

    http://code.google.com/p/plugd/

    I even submitted a patch to jquery because I think the single function use makes sense and is even more ‘rockstar’ than two inline functions:

    http://dev.jquery.com/ticket/3498

    Regards,
    Peter Higgins
11. Sklep Zoologiczny

    It has potential! Got some idea, will share when finnished.
12. joe

    Hello. I’am looking for this jQuery-Function in Mootools. Any Idea?

    $(document).ready(function() {
    
    $(".commentBox").hover(
      function() { $(this).find(".commentDate").css({'display' : 'inline'}); },
      function() { $(this).find(".commentDate").css({'display' : 'none'}); }
    );
    });
    
13. Constantin

    @joe This should do what you ask:

    window.addEvent('domready', function(){
        $(document.body).getElements('.commentBox').addEvents({
            'mouseenter': function(){
                this.getElement('.commentDate').setStyle('display','inline');
            },
            'mouseleave': function(){
                this.getElement('.commentDate').setStyle('display','none');
            }
        }) 
    });
14. lossendae

    @Constantin:

    Which can be backported to jQuery

    $('document').ready(function(){
    $('.commentBox').bind('mouseenter mouseleave',function(){
    $(this).find('.commentDate').css({‘display’ : ‘inline’});
    },'mouseleave',function(){
    $(this).find('.commentDate').css({‘display’ : ‘none’});
    })
    });
    

    It’s not because jQuery has shortcuts that you must use them.