Q: Hi. Is there any way to pass a parameter into a function used in addEventListener? I have an array of objects and need to loop through them all and apply a function to each one, if clicked, but I need to pass in their index so they can each have a unique effect. ``` var inpts = document.getElementsByClassName("login-input"); function onInptHover() { inpts[i].value = null; } for(var i = 0; i < inpts.length; i++) { inpts[i].addEventListener("click", onInptHover); } ```

I've run into this frustrating issue before and there are a couple of solutions I'll frequently use. In this case, it's probably best to re-index the element. Something like this should work: ```for(var i = 0; i < inputs.length; i++) { inputs[i].addEventListener("click", function() { var thisInput = this;//get the element which the event listener is occurring on } }``` Use `thisInput` to manipulate the input clicked. If you wish to manipulate the parent element, you can use `this.parentElement`. From there, you can also access the other inputs in the parent element as needed.

Question 1

Instead, could you just use the mouse functions like, mouseClicked or MouseOver. Maybe we could say:

mouseClicked = function() {
        var text = document.getElementById("content");
        text.textContent = "hi";
};

Accepted Answer

That syntax will only work in the ProcessingJS library. The main reason we don't use it for the DOM is because there could be multiple objects with an event. In the case you are talking about, there is only the canvas. But a webpage can have many objects each with their own events. The video already showed this, but here is some event code:
```
var text = document.getElementById("content");

text.addEventListener("click", function() {
    text.textContent = "Hi!";
});
```

Good luck and happy coding!

Question 2

How the library mentioned at the last paragraph (FastClick) or other, like the ProcessingJS at the JavaScript, is added to the programation? Here at Khan Academy, this happens automatically, so I've been thinking, can it be used at another site, just adding it in the code with some element of the language?

Accepted Answer

You can find most of these libraries on a CDN such as CDNJS (http://cdnjs.com/libraries/fastclick). Once you know the URL of the hosted JavaScript file, all you need to do is import it with a ` ```

Question 3

Why can't we use jQuery in our webpages?

Accepted Answer

You can. I personally believe it is good to know the JS behind JQuery.

Question 4

Can a touch event be triggered by a laptop with a trackpad?

Accepted Answer

No, As far as I know..
Because the  TrackPad/TouchPad is actually a (mouse) according to the system..
So whatever applies to the mouse,  its also applies to the Track/TouchPad (vise versa).

Question 5

how can I see if someone is pressing the enter key?

Accepted Answer

You would add an event listener to a node (in this case, `window`) and tell it to listen for the `keydown` event.  Then, when the key is pressed, check if the `key` property of the event object is equal to `"Enter"`.  Look:
```
window.addEventListener("keydown", function(e) {
   if(e.key === "Enter") {
      alert("Enter was pressed!");
    }
});
```

Question 6

What does JS consider a double-click? Is there an amount of time between clicks that qualifies two clicks together as a double click?

Accepted Answer

Yep.

And a click is a mouse-press followed by a mouse-release.

So a double click is a mouse-press, mouse-release, mouse-press and another mouse-release. All within a small timespan.
That timespan is determined by the operating system.
On Windows, I think that timespan is 0.5 seconds, but it's configurable.

Question 7

Hi.
Is there any way to pass a parameter into a function used in addEventListener? I have an array of objects and need to loop through them all and apply a function to each one, if clicked, but I need to pass in their index so they can each have a unique effect.
```
var inpts = document.getElementsByClassName("login-input");
      
        function onInptHover() {
          inpts[i].value = null;
        }
        
      for(var i = 0; i < inpts.length; i++) {
        inpts[i].addEventListener("click", onInptHover);
      }
```

Accepted Answer

I've run into this frustrating issue before and there are a couple of solutions I'll frequently use.

In this case, it's probably best to re-index the element. Something like this should work:

```for(var i = 0; i < inputs.length; i++) {
   inputs[i].addEventListener("click", function() {
      var thisInput = this;//get the element which the event listener is occurring on
   }
}```

Use `thisInput` to manipulate the input clicked. If you wish to manipulate the parent element, you can use `this.parentElement`. From there, you can also access the other inputs in the parent element as needed.

Computer programming

Course: Computer programming > Unit 6

DOM event types

Want to join the conversation?