Adding multiple Events to an Element

Question

Lets say i have the following code:

function addScrollEvent(scrollElement, direction) { 
    $(scrollElement).mouseover(function(){
        var maxStreckeY = $("#viewport div").height() - $("#viewport").innerHeight();
        var currentPos = $("#viewport").scrollTop();
        if (direction == "down") {
            var restStrecke = maxStreckeY - currentPos;
            var timer = restStrecke / maxStreckeY *  namespace.config.autoScrollSpeed;
            $(element).stop().animate({scrollTop: maxStreckeY}, timer);
        }
        if (direction == "right") {
            var width = $("#viewport div").width();
            $(element).stop().animate({scrollLeft: width - $("#viewport").innerWidth()}, namespace.config.autoScrollSpeed);
        }
        if (direction == "up") {
            var timer = currentPos / maxStreckeY *  namespace.config.autoScrollSpeed;
            $(element).stop().animate({scrollTop: 0}, timer);   
        }
        if (direction == "left") {
            $(element).stop().animate({scrollLeft: 0}, namespace.config.autoScrollSpeed);
        }
    });

    $(scrollElement).mouseleave(function(){
        $(element).stop();
        checkScrollElements();
    });

How do i append multiple events to the scrollElement? i would like to do the exact code on tabhold (at the mouseover part) and also on tableave (at the mouseleave part)

I already tried to do something like this :

$(scrollElement).on("mouseover tabhold", function(){
    ... the function
});

which did not really work since the console gave me the following error :

"on is not a function"

Anybody got a solution for this without copying the same code for another event block? Thanks in advance

which version of jQuery are you using? if old version (<1.7) then use live() instead of on() — Pranav C Balan
– Pranav C Balan, Commented Nov 27, 2015 at 7:39
Instead of declaring the behaviour for the handler inside the addEventListener function, define it as a separate function and pass a reference to the function in — Simon Merrick
– Simon Merrick, Commented Nov 27, 2015 at 7:40

T.J. Crowder · Accepted Answer · 2015-11-27 07:44:41Z

1

Your on solution is correct; the problem is you're using an obsolete copy of jQuery. v1.6 was outdated by v1.7 four years ago. Upgrade to the latest.

If for some reason you can't, the old function is bind:

$(scrollElement).bind("mouseover tabhold", function(){
    ... the function
});

Another option is to write the function separately, give it a name, and use that name. One advantage to that is it lets you use the function in combination with others if needed.

answered Nov 27, 2015 at 7:44

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Snackaholic Over a year ago

So why did they invent 3 diffrent types for multiple event handling? i dont understand. anyway this solved my problem. at least i dont get any errors this way. i will try with my tablet and check out whether it works or not :)

T.J. Crowder Over a year ago

@TeaTime: Originally it was bind. Then event delegation was added in the form of live and delegate. Then they decided it was silly to have two different APIs, one for direct handling and another for delegation, and separately there were multiple issues with live. So they decided to create a new, unified API that did both direct and delegated handling, and they called it on.

Collectives™ on Stack Overflow

Adding multiple Events to an Element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related