Results 1 to 3 of 3

Thread: One element, multiple events

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default 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. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In regular javascript there is no #foo. The nearest (though not exact) equivalent would be document.getElementById('foo'). Something you could do along those lines would be:

    Code:
    var myfoo = document.getElementById('foo');
    myfoo.onfocus = myfoo.onblur = function(e){
    	if(e.type === 'focus'){
    		//do this;
    	}else{
    		//do that;
    	}
    };
    But this is misleading because jQuery is assigning the events via addEventListener/attachEvent (whichever is first available), and is creating a reference to an object containing an (the first on the page if there are any) element with an id of foo regardless of whether or not that object has any members. And because one of the very reasons for using jQuery is to be able to use error reducing shortcuts of this nature unavailable in standard javascript. To do all that in standard javascript would be quite lengthy and involved.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (06-19-2014)

  4. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    In regular javascript there is no #foo. The nearest (though not exact) equivalent would be document.getElementById('foo'). Something you could do along those lines would be:

    Code:
    var myfoo = document.getElementById('foo');
    myfoo.onfocus = myfoo.onblur = function(e){
    	if(e.type === 'focus'){
    		//do this;
    	}else{
    		//do that;
    	}
    };
    But this is misleading because jQuery is assigning the events via addEventListener/attachEvent (whichever is first available), and is creating a reference to an object containing an (the first on the page if there are any) element with an id of foo regardless of whether or not that object has any members. And because one of the very reasons for using jQuery is to be able to use error reducing shortcuts of this nature unavailable in standard javascript. To do all that in standard javascript would be quite lengthy and involved.
    Thanks for the explanation! I finally decided to use two separate functions.

Similar Threads

  1. Multiple events one function
    By Rain Lover in forum JavaScript
    Replies: 2
    Last Post: 05-14-2014, 07:23 AM
  2. multiple onload and onchange events plus...
    By gwmbox in forum JavaScript
    Replies: 9
    Last Post: 07-08-2011, 02:06 PM
  3. multiple onmouseover events
    By rich1234 in forum JavaScript
    Replies: 4
    Last Post: 10-07-2008, 03:10 AM
  4. Using multiple onMouseOver Events
    By schmiford in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 08-14-2007, 03:40 PM
  5. Multiple onclick events
    By fambi in forum JavaScript
    Replies: 5
    Last Post: 03-30-2006, 05:01 PM

Bookmarks

Posting Permissions

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