Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

brandonlind2
brandonlind2
7,823 Points
Posted by brandonlind2
brandonlind2
7,823 Points

calling a method on an empty argument?

I don't understand how understand how you can call a method on an empty argument and have it do something for example in the jquery Api there is the method event.preventDefault Can someone please explain this to me? shouldnt this.preventDefault be used, what is the point of using an argument like that and how is that event arguement working? Would event normally just be an empty argument?

$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );

2 Answers

Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points

The event have nothing to do with jQuery, it comes from JavaScript. The function you pass as the first argument in .click() is actually called from javascript itself, when you create a click event. JS will pass an event object, witch contains information and methods for the specific event that just happened. Among other things, you can use it to prevent the default action (could be a submit call or something), you can get what element that was affected, what type of event etc. Because of the event object we can create a function to call on many different listeners, or many different elements, without having to type out that function within each .click() or addEventListener()

function clickFunction( event ) {
    // do stuff
}

$element.click( clickFunction );


// If you need other arguments you will have to wrap the function call in an anonymous function:
function clickFunctionWithArg( event, otherArg ) {
    // do stuff
    alert( otherArg);
}

element.addEventListener( "click", function ( event ) {
  clickFunctionWithArg( event, "Alert me!" );
});
brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

Thanks that makes more sense but I'm still a bit confused though. I don't understand the syntax, normally when calling a method from my understanding you dont normally need to pass the object as a argument be for using it in a function

//i dont need to pass Object as an argument first
var obj={name: 'sam',
               age: 20};
var arry=Object.keys(obj);

/***I dont understand what the difference is, why does the 
event object need to be passed as an arguement?***/
function  exmple( event ) {
   event.preventDefault()
}

//I dont think I'm completely understanding, why wouldn't this work?
function example() {
    event.preventDefault
}
Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points 
//i dont need to pass Object as an argument first 
var obj={name: 'sam', age: 20}; 
var arry=Object.keys(obj); } 

// Sorry, i don't know what you mean. If you are referring to the Object, that is an object that lives in JavaScript.
// All object are based on this.


//I dont understand what is different, why does the event object need to be passed as an arguement?
function exmple( event ) { event.preventDefault() };

// Here you are creating the function with an argument that is named 'event'. This argument will be
// filled by JavaScript itself when function is called. This is how eventListeners work. The first arg
// in your function will be filled with the event object.
// You can name it anything:
element.addEventListener( "click", function ( myEventObj ) { myEventObj.preventDefault(); } );


//I dont think I'm completely understanding, why wouldn't this work? 
function exmaple() { event.preventDefault } 

// This cannot work since you don't catch the event object in a variable. JavaScript would not know
// what event is here.
brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

Thanks I think I understand so unlike the object.keys method, when you call event.preventDefault in function it looks for an empty argument to pass an event object in?

Jacob Bergdahl
Jacob Bergdahl
29,118 Points
Jacob Bergdahl
Jacob Bergdahl
29,118 Points

.preventDefault() is a method, as you can tell by the dot-notation. This means that while no argument is being passed in, the method is being called on the event object. You can think of it like this: preventDefault(event). Thus, the method receives the event object.

brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

Thanks that makes more sense however I'm still a bit confused about the syntax, normally when calling a method from my understanding you dont normally need to pass the object as a argument be for using it in a function

//i dont need to pass Object as an argument first
var obj={name: 'sam',
               age: 20};
var arry=Object.keys(obj);
}
/***I dont understand what is different, why does the 
event object need to be passed as an arguement?***/
function  exmple( event ) {
   event.preventDefault()
}

//I understand event.preventDefault() but I don't understand the purpose
// of the event object being passed as an argument
//why wouldnt this work?
function exmaple() {
    event.preventDefault()
}