Javascript .addEventListener isn't working

Question

This is probably dumb question, but I'm new in Javascript and I really can't get it.

So I have a bunch of Chart.js graphs on my page and I wanted to add some custom behavior. I made such functions to generate different listeners for different graphs:

const listenerPointerUp = (params) =>
    evt => {
        //code
    }

and set them up:

canvas.addEventListener('pointerup', listenerPointerUp(params));

but listeners just weren't working, although they were there in Chrome

until I tried:

canvas.onpointerup = listenerPointerUp(params)

Then it started working just fine.

I wonder what caused such behavior?

I hope I provided enough data to figure out what was my mistake. I suppose isn't caused by other context.

Does this answer your question? [Pass Argument In Event Listener Function](https://stackoverflow.com/questions/25434645/pass-argument-in-event-listener-function) — Sebastian Simon, Jan 14 '21 at 15:28
Everyone is missing the fact it is calling a function and it returns a function..... — epascarello, Jan 14 '21 at 15:35
Surely OP means they weren't being called. How else would they not be working — Keldan Chapman, Jan 14 '21 at 15:48
OP, I can't see any reason why it wouldn't work. Could you try a simple example like `canvas.addEventListener('pointerup', () => console.log('test'))` to see if it gets called? — Keldan Chapman, Jan 14 '21 at 15:52
@KeldanChapman, yes, sorry, that is exactly what I meant. And I did try same simple example, but it wasn't working either. Could it be caused by Chart.js? — Kirill Dudchenko, Jan 14 '21 at 16:25

prasanth · Answer 1 · 2021-01-14T15:47:34.743

-2

You could do the function call like this

   canvas.addEventListener('pointerup', function(e) {
      listenerPointerUp(params,e)
    });

    const listenerPointerUp = (params,evt) =>{
        //code
    }

working fine
canvas.onpointerup = listenerPointerUp(params)
function call properly assigned with in event

Why ?

The function trigger on window load not an event call. And also listener not assigning the function properly for the event

let params = "clicked"
document.querySelector('#demo').addEventListener('click', listenerPointerUp(params));

function listenerPointerUp(e) {
  console.log(e)
}

<button id="demo">click</button>

Solution

let params = "clicked"
document.querySelector('#demo').addEventListener('click', ()=>listenerPointerUp(params));

function listenerPointerUp(e) {
  console.log(e)
}

<button id="demo">click</button>

edited Jan 14 '21 at 15:47

answered Jan 14 '21 at 15:26

prasanth

22,145
4
29
53

1

The `listenerPointerUp` function returns the intended callback function. You shouldn't be wrapping it in another function (ie. `()=>listenerPointerUp(params)`) otherwise nothing will happen (Nothing will call the returned function) – Keldan Chapman Jan 14 '21 at 15:39
@KeldanChapman you are correct. But i m not intent to return anything. Just wrapping the function call via ES6 Method – prasanth Jan 14 '21 at 15:43
But that is my point. The `listenerPointerUp` function needs to be invoked immediately, so that it can return the proper callback function, have a look again at the OPs code. If you wrap the function call, then it assigns the anonymous function to the event listener, instead of the intended callback function. – Keldan Chapman Jan 14 '21 at 15:46
In other words, `listenerPointerUp` is the callback _generator_, **NOT** the callback. – Keldan Chapman Jan 14 '21 at 15:47
@KeldanChapman Thanks Man.. i forget to read `listenerPointerUp` function. Now updated – prasanth Jan 14 '21 at 15:50
I'm glad you read the function, but you are still wrapping it in a function, so it will still not work... – Keldan Chapman Jan 14 '21 at 15:54
@KeldanChapman yes.. but the op passing params to the `listenerPointerUp` function. That why wrapping the function. – prasanth Jan 14 '21 at 15:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227342/discussion-between-keldan-chapman-and-prasanth). – Keldan Chapman Jan 14 '21 at 16:04

Javascript .addEventListener isn't working

1 Answers1