-2

Example

x.addEventListener("click", function() { myFunction(this); } );
function myFunction(obj) {
  alert(obj.innerHTML);
}

See the function invocation inside the anonymous function? The function inside the anonymous function have an argument of "this", my question is what are the possible parameters the addEventListener provides?

I'm really new so please excuse my many misinform usage of words.

EDIT: I already looked through many reference online such as w3schools, Mozilla Developer Network, Stackoverflow similar question, and google but I couldn't find any answer! If you have a link for what I am looking for please send it to me.

Miko Chu
  • 319
  • 3
  • 14
  • checkout the documentation, there are also great resources on the internet to help you learn programming. This is not the place to do that. This is the place to get help solving problems. – synthet1c Nov 12 '16 at 07:32
  • I already tried looking in w3school reference! I look inside mozzila developer network but I couldn't find one that list all the possible arguments that are passed by addEventListener. Can you give me a link if you already know where to find it – Miko Chu Nov 12 '16 at 07:36
  • Try http://devdocs.io/dom/eventtarget/addeventlistener (DevDocs is a great resource). – Mark Williams Nov 12 '16 at 07:36
  • `this` is not a parameter so it's somewhat unclear what the actual question is. – JJJ Nov 12 '16 at 07:38
  • 1
    The link is for the click event but has other links to other events https://developer.mozilla.org/en-US/docs/Web/Events/click. Learn how to use the dev tools provided with the browser (F12), learn breakpoints and single stepping through code. Do a google search for dev tools – jeff Nov 12 '16 at 07:43
  • @JJJ Where am I getting that "this" argument? Is it from the addEventListener? – Miko Chu Nov 12 '16 at 07:44
  • 1
    It's not an argument either. It gets set when the event is triggered. You should probably read up on the `this` keyword, e.g. http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – JJJ Nov 12 '16 at 07:46
  • @jeff Is that where I am getting the this? And are the properties the possible arguments? – Miko Chu Nov 12 '16 at 07:48
  • 1
    the argument of obj will contain these properties. – jeff Nov 12 '16 at 07:51
  • @JJJ I think I understand it better now, can you please formally answer it with that explanation and I will mark is as correct! – Miko Chu Nov 12 '16 at 07:52

1 Answers1

3

It's all on the MDN page.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

listener

The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.

The value of this within the handler

When attaching a handler function to an element using addEventListener(), the value of this inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler.

const x = document.querySelector('#x')

x.addEventListener("click", function(event) { 
  console.log('this', this) // element that event was bound to
  console.log('event', event) // MouseEvent object, this contains info about the event
  myFunction(this) // call your function passing the clicked element
});

function myFunction(element) {
  alert(element.innerHTML)
}
<div id="x">Click me!</div>
synthet1c
  • 5,543
  • 2
  • 15
  • 30