Skip to content

addEventListener, object with a handleEvent() method support. #8196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tanangular opened this issue Jan 14, 2023 · 3 comments · May be fixed by #15856
Open

addEventListener, object with a handleEvent() method support. #8196

tanangular opened this issue Jan 14, 2023 · 3 comments · May be fixed by #15856
Labels
PRs welcome we're not going to spend any time on this, but we'll accept pull requests

Comments

@tanangular
Copy link

Describe the problem

I'm not sure this is a bug or the framework's intention.

According to the DOM API specification document

addEventListener(type, listener)

listener could be an object that has a handleEvent() method.
Ref: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
event object

I tried writing the following code in the svelte REPL:
Svelte REPL: https://svelte.dev/repl/538e3dbe765947a9b0a04a88cb050c6a?version=3.55.1

Svelte compiler seems to work with listener objects via handleEvent(), but it produce different results when referencing by object name and "this" including to reactive ui.

Describe the proposed solution

svelte compiler should support addEventListener object with handleEvent()

Alternatives considered

svelte compiler should support addEventListener object with handleEvent()

Importance

nice to have

@brunnerh
Copy link
Member

brunnerh commented Jan 15, 2023

it produce different results when referencing by object name and "this" including to reactive ui

Are you referring to adding an event like this?

on:click={listenerObj.myhandleEvent}

Then that has nothing to do with Svelte. If you reference a function like that, this will not be bound; that is just how JS works. Which is why you are supposed to use an anonymous function if you want this to be bound to the object the function is defined on:

on:click={() => listenerObj.myhandleEvent()}

I do not see any wrong behavior here.

@brunnerh
Copy link
Member

There is something off about how the event handler object is attached, though...

If the handleEvent method only contains the log statement it is attached via:

listen(button1, "click", /*listenerObjHandleEvent*/ ctx[1])

If an increment statement is added (listenerObjHandleEvent.count++), that code changes to:

listen(button1, "click", function () {
    if (is_function(/*listenerObjHandleEvent*/ ctx[1]))
        /*listenerObjHandleEvent*/ ctx[1].apply(this, arguments);
})

And since the handler object is not a function, it will no longer work.

@tanangular
Copy link
Author

Thank you for quick reply, yes I saw compiled code in REPL

listen(button1, "click", function () {
    if (is_function(/*listenerObjHandleEvent*/ ctx[1]))
        /*listenerObjHandleEvent*/ ctx[1].apply(this, arguments);
})

My Intension is to want svelte compiler support listener object with a handleEvent() according to the DOM API specification.

@Rich-Harris Rich-Harris added the PRs welcome we're not going to spend any time on this, but we'll accept pull requests label Apr 2, 2024
@7nik 7nik linked a pull request Apr 30, 2025 that will close this issue
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PRs welcome we're not going to spend any time on this, but we'll accept pull requests
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants