Passing "null" to on:"eventname" still adds event listener.

[humbleCoder1990]

Describe the bug

Passing "export let" variable to on: directives still creates event listener.
Plain "let" variable works..
But It also doesn't work if I use "on:click|stopPropagation"

Reproduction

This adds event listener.

This also add event listener..

Logs

No response

System Info

Mac, Chrome

Severity

annoyance

[Conduitry]

I guess the question is whether on:click|stopPropagation={null} should stop propagation or not. (If it does, we need to attach an event handler to do that.) If we were designing this feature fresh today, I'm not sure what my opinion on that would be. But since this is how the feature has behaved for years, I would definitely be in favor of documenting it and not changing the behavior.

[humbleCoder1990]

My question is actually "How to add or remove event listener dynamically ? "
I don't want to call any "addEventListener"
If I pass null, svelte should remove the listener, and If I pass any callBack on runtime, It should add listener.

[kindoflew]

@humbleCoder1990 you can probably achieve something like that with an action instead of using on:{eventname}. here's a rough example:

function conditionalEvent(node, callback) {
  let _callback;

  function setListener(callback) {    
    if (callback) {
      node.addEventListener('click', callback);
      _callback = callback; // save callback for when it's null
    } else {
      node.removeEventListener('click', _callback);
      _callback = null;
    }
  }

  setListener(callback);

  return {
    update(callback) {
      setListener(callback)
    },
    destroy() {
      node.removeEventListener('click', _callback);
      _callback = null;
    }
  }
}

https://svelte.dev/repl/7aeb74bcc4b44308bb3ab6ac0da734c3?version=3.48.0

[Rich-Harris]

Events have been overhauled in Svelte 5, so I'll close this