Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    One element, multiple events

    In jQuery you can easily do it like this:

    Code:
    $("#foo").focus(function () {
        // Do this.
    }).blur(function () {
        // Do that.
    });
    Can we do something similar in JavaScript so we don't have to repeat #foo in two separate functions?

  • #2
    New Coder
    Join Date
    Jun 2014
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    you can do it by entering events as property of element. like <div id="foo" onfocus="code goes here" onclick="code goes here" .......and so on.......>

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    use addEventListener ...



    https://developer.mozilla.org/en-US/...dEventListener

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <button id="b1">clickMe</button>
    <script>
    addEvents({
     "el":b1,
     "click":function(){this.innerHTML="clicked"},
     "mouseover":function(){this.innerHTML="hovering"},
     "mouseout":function(){this.innerHTML="clickMe"}
    });
    function addEvents(ob){
     var a = Object.keys(ob); 
     for(var i = 1;i<a.length;i++)
      ob[a[0]].addEventListener(a[i],ob[a[i]]);
    }
    </script>
    </body>
    </html>
    Last edited by DaveyErwin; 06-19-2014 at 10:30 PM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    use addEventListener ...



    https://developer.mozilla.org/en-US/...dEventListener

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <button id="b1">clickMe</button>
    <script>
    addEvents({
     "el":b1,
     "click":function(){this.innerHTML="clicked"},
     "mouseover":function(){this.innerHTML="hovering"},
     "mouseout":function(){this.innerHTML="clickMe"}
    });
    function addEvents(ob){
     var a = Object.keys(ob); 
     for(var i = 1;i<a.length;i++)
      ob[a[0]].addEventListener(a[i],ob[a[i]]);
    }
    </script>
    </body>
    </html>
    Thanks for the sample code, but it seems that using two separate functions for #foo is easier than your approach or "method chaining" as suggested by glenngv.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Note that if you support IE8, you need to have polyfill method for Object.keys using this and use attachEvent for IE8 instead of addEventListener.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you want a real and simple object chaining for attaching events that is as close as what jQuery does.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Add Event Chaining</title>
    </head>
    <body>
    <input type="text" id="foo" />
    <div id="debug"></div>
    
    <script>
    function on(eventName, eventHandler) {
        //do object detection only once
        if (window.addEventListener) {
            window.on = function(eventName, eventHandler) {
                this.addEventListener(eventName, eventHandler, false);
                return this; //return to allow object chaining
            }
        }
        else { //IE
            window.on = function(eventName, eventHandler) {
                this.attachEvent('on' + eventName, eventHandler);
                return this; //return to allow object chaining
            }
        }
    
        //re-attach custom add event method as it has changed
        Element && (Element.prototype.on = on);
        HTMLDocument && (HTMLDocument.prototype.on = on);
        Window && (Window.prototype.on = on);
        
        return on.call(this, eventName, eventHandler);
    }
    
    //attach custom add event method to the element, document and window objects
    Element && (Element.prototype.on = on);
    HTMLDocument && (HTMLDocument.prototype.on = on);
    Window && (Window.prototype.on = on);
    
    //usage
    document.getElementById('foo')
        .on('focus', function(e) {
            document.getElementById('debug').innerHTML += 'focus ';
        })
        .on('blur', function(e) {
            document.getElementById('debug').innerHTML += 'blur ';
        });
    </script>
    </body>
    </html>
    Last edited by glenngv; 06-20-2014 at 08:29 PM. Reason: edited code
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    Rain Lover (06-20-2014)

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    If you want a real and simple object chaining for attaching events that is as close as what jQuery does.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Add Event Chaining</title>
    </head>
    <body>
    <input type="text" id="foo" />
    <div id="debug"></div>
    
    <script>
    function on(eventName, eventHandler) {
        //do object detection only once
        if (window.addEventListener) {
            window.on = function(eventName, eventHandler) {
                this.addEventListener(eventName, eventHandler, false);
                return this; //return to allow object chaining
            }
        }
        else { //IE
            window.on = function(eventName, eventHandler) {
                this.attachEvent('on' + eventName, eventHandler);
                return this; //return to allow object chaining
            }
        }
        
        return on.call(this, eventName, eventHandler);
    }
    
    //attach custom add event method to the element, document and window objects
    Element && (Element.prototype.on = on);
    HTMLDocument && (HTMLDocument.prototype.on = on);
    Window && (Window.prototype.on = on);
    
    //usage
    document.getElementById('foo')
        .on('focus', function(e) {
            document.getElementById('debug').innerHTML += 'focus ';
        })
        .on('blur', function(e) {
            document.getElementById('debug').innerHTML += 'blur ';
        });
    </script>
    </body>
    </html>
    Nice demo! Thank you!

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Note that I have edited the code in my previous post.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •