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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: what does 'e' mean in $("...").hover(function(e){...});

    hi,
    this is a jquery tooltip i got it from somewhere, and i am trying to understand this code, it seems quite straight forward, but i dont understand what does that 'e' stand for? i come across this often in other kind of jquey plugins/ functions written by other people...

    Code:
    this.tooltip = function(){	
    	/* CONFIG */		
    		xOffset = 10;
    		yOffset = 20;		
    		// these 2 variable determine popup's distance from the cursor
    		// you might want to adjust to get the right result		
    	/* END CONFIG */		
    	$("#logo img").hover(function(e){											  
    		this.t = this.title;
    		this.title = "";									  
    		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
    		$("#tooltip")
    			.css("top",(e.pageY - xOffset) + "px")
    			.css("left",(e.pageX + yOffset) + "px")
    			.fadeIn("fast");		
        },
    	function(){
    		this.title = this.t;		
    		$("#tooltip").remove();
        });	
    	$("#logo img").mousemove(function(e){
    		$("#tooltip")
    			.css("top",(e.pageY - xOffset) + "px")
    			.css("left",(e.pageX + yOffset) + "px");
    	});			
    };
    it will be great to know what it means and how to use it.
    many thanks,
    Lau

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    It is not jquery feature only. Here, the argument 'e' is an instance of the Event object. The event object provides some useful properties and methods for event handlers.
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    lauthiamkok (07-18-2009)

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Amphiluke View Post
    It is not jquery feature only. Here, the argument 'e' is an instance of the Event object. The event object provides some useful properties and methods for event handlers.
    hi thanks. i am a bit slow. what does an event object mean? i can understand that an event is like 'click', 'mouseover', etc - they are actions to be performed by users interactions.

    i still cannot get it how can, for instance, the event - 'click', become an object?

    any references can i pick up online please...?
    Last edited by lauthiamkok; 07-18-2009 at 01:11 AM.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Amphiluke already linked to some information. Also, this might help you: http://docs.jquery.com/Events/jQuery.Event.

    The event object for example contains information about which DOM element triggered the event, which can be quite useful.

  • Users who have thanked venegal for this post:

    lauthiamkok (07-18-2009)

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by venegal View Post
    Amphiluke already linked to some information. Also, this might help you: http://docs.jquery.com/Events/jQuery.Event.

    The event object for example contains information about which DOM element triggered the event, which can be quite useful.
    im getting there now... thank you.

    from the jquery official website it says in jquery method, it should be -

    Code:
    event.pageX and event.pageY
    we need to have 'event' in front of the event object's properties... but the example from my op it uses an 'e' only

    Code:
    e.pageX and e.pageY
    i think the 'e' one is normal javascript method, but with 'event' is the proper jquery method - am i right?

    thanks,
    L

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Not exactly. The event object is automatically passed to the event handler when the event is triggered. At this stage it doesn't have a name. How you decide to call it within the handler is completely up to you, just like any other parameter passed to a function -- you just have to define it in the function definition.

    Code:
    $("a").click(function(event) {
      alert("Current mouse position: " + event.pageX + ", " + event.pageY );
    });
    Code:
    $("a").click(function(e) {
      alert("Current mouse position: " + e.pageX + ", " + e.pageY );
    });
    and

    Code:
    $("a").click(function(somethingCompletelyNondescriptive) {
      alert("Current mouse position: " + somethingCompletelyNondescriptive.pageX + ", " + somethingCompletelyNondescriptive.pageY );
    });
    are completely the same.

  • Users who have thanked venegal for this post:

    lauthiamkok (07-18-2009)

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by venegal View Post
    Not exactly. The event object is automatically passed to the event handler when the event is triggered. At this stage it doesn't have a name. How you decide to call it within the handler is completely up to you, just like any other parameter passed to a function -- you just have to define it in the function definition.

    Code:
    $("a").click(function(event) {
      alert("Current mouse position: " + event.pageX + ", " + event.pageY );
    });
    Code:
    $("a").click(function(e) {
      alert("Current mouse position: " + e.pageX + ", " + e.pageY );
    });
    and

    Code:
    $("a").click(function(somethingCompletelyNondescriptive) {
      alert("Current mouse position: " + somethingCompletelyNondescriptive.pageX + ", " + somethingCompletelyNondescriptive.pageY );
    });
    are completely the same.
    i got it now... thank you very much.


  •  

    Posting Permissions

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