CODEWITHSUNDEEP
javascripthtml
Matthew Francis
Matthew Francis

Reputation: 77

I am confused with the argument in an event function

Here is a code for reference: https://jsfiddle.net/x0k5dx8w/8/

From my understanding: The event handler (eg; addEventListener) passes the event object into the parameters of the invoked function.

(eg; document.getElementbyId("idname").addEventListener("click", function(eventobj),

is essentialy saying 

document.getElementbyId("id").addEventListener("click", function(idname));

Now I am confused with two things, what is the difference between not giving your event function parameter a name vs giving it a name?

and lastly, why is that you cannot do:

function eventFunc() {
    var object1 = document.getElementById("object1");
    if( object1.target =..... ) {
        // do something
    }
}

Upvotes: 2

Views: 167

Answers (4)

ADyson
ADyson

Reputation: 61849

I think you are getting confused between the DOM element ("idname") and the event object.

Your statement

document.getElementbyId("idname").addEventListener("click", function(eventobj)

is essentialy saying 

document.getElementbyId("id").addEventListener("click", function(idname));

is wrong on at least two counts:

1) "document.getElementbyId("idname")" is not the same as "document.getElementbyId("id")" . "id" and "idname" are two different IDs. They can't represent the same element.

2) ".addEventListener("click", function(idname))". Idname (i.e. the DOM element) does not get passed to the function. An Event object gets passed to the function.

Likewise you can't do your suggestion of

function eventFunc(){
var object1 = document.getElementById("object1");
if(object1.target =.....)
//do something
}

because "object" is a DOM element, not an event object.

See a working example of the event model here: https://jsfiddle.net/obqmazzs/3/

See also some fairly comprehensive documentation at http://www.w3schools.com/jsref/dom_obj_event.asp

Upvotes: 1

Nestoraj
Nestoraj

Reputation: 762

I think you are mistaking somethings.

document.getElementbyId("idname").addEventListener("click", function(eventobj)

is not the same that

document.getElementbyId("id").addEventListener("click", function(idname));

When you add an event listener it returns an event type when it raises, not the original object. This event type has some information about the original object but also has many other properties.

You can get more info about event type here: Events

1º There is not a difference between set a parameter or not. When you need information about the event you can pass a parameter to the function to get that information (For example to know how fires the event), but if you do not need any information you can just avoid it(For example to show an alert message when you click a button).

2º You can not do that because object1 has not property "target". That property is from event type.

Hope it helps you

Upvotes: 0

salezica
salezica

Reputation: 76909

The syntax you posted is not, well, valid. Let's review how to handle an event.

An event handler is a function that takes an Event object as parameter:

function handleClick(event) {
  let elementClicked = event.target;
  console.log('You clicked', elementClicked);
}

The Event has several useful properties and methods. target is the most commonly accessed, but preventDefault() and stopPropagation() are also important to know about.

To attach a listener to an element, use addEventListener:

let someElement = document.querySelector('button')
someElement.addEventListener('click', handleClick)

To remove it, use removeEventListener, passing the same function object given to addEventListener (not a copy, wrapper or inline function: the SAME function object):

someElement.removeEventListener('click', handleClick)

For future reference, check out Mozilla's MDN (where all the links in this answer come from), it's a fantastic resource.

Cheers!

Upvotes: 1

Drew Major
Drew Major

Reputation: 519

the first variable in a function such as this is the "event object" whcih is not the object the event happened on, but rather a collection of data related to the event that occurred.

example:

function(event){ console.log(event.target) }

if you bind this event to say, a div on click, the event 'event' is the click that occurred and any data related to it.

event.target will a listof everything that was clicked on (the div, the divs parent, the body, the document)

or event.preventDefault() will stop all the default actions associated with an event (example, a link click going to a different page)

Upvotes: 0

Related Questions