Event bubbling order not respected when listeners are added both with addEventListener and attributes

[kepzAT]

Describe the bug

I have found a bug where a button whose listener is assigned with onpointerdown attribute is getting the event after the parent div, which has a listener assigned via addEventListener in onMount.

There is no event capturing, so bubbling should work in the correct direction. (button first, div second).

In this example, DIV listener callback always gets triggered first:

Reproduction

<script>
	import {onMount} from 'svelte'
	
	let elementNames = $state([])
	
	const storeElementName = (e) => {
	        elementNames.push(e.currentTarget.nodeName)
	}

	let div
	onMount(() => {
		div.addEventListener('pointerdown', storeElementName)
	})
</script>

<p>Press the button:</p>
<div bind:this={div}>
	<button onpointerdown={storeElementName}>Button should receive the event first.</button>
	Div should receive the event second.
</div>
<p>Order of listeners triggered: <span>{elementNames.join(', ')}</span></p>
<button onclick={() => {elementNames = []}}>Clear</button>

<style>
	div {
		border: 1px solid red;
		padding: 20px;
	}

	span {
		color: orange;
	}
</style>

Playground:
https://svelte.dev/playground/5737a1699e444157afec29b8ed005c7d?version=latest

Logs

System Info

System:
    OS: Linux 6.6 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 9.34 GB / 15.48 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 10.10.0 - /usr/bin/pnpm
  npmPackages:
    svelte: ^5.34.7 => 5.34.7

Severity

annoyance

[MotionlessTrain]

There is an ‘on’ method in svelte/events which is meant to have events that are added programmatically play nice with the ones svelte adds (using the on* handlers or bind:value and friends)

[Conduitry]

on is the intended way to deal with this. The alternative would be to monkeypatch addEventListener, which don't want to do.

[kepzAT]

@MotionlessTrain @Conduitry I thought on: is legacy syntax. Do you have a Svelte 5 / runes example I could look at? Appreciate the reply!

[kepzAT]

I get a compiler error in the playground if i try your suggestion:

Mixing old (on:pointerdown) and new syntaxes for event handling is not allowed. Use only the onpointerdown syntax
https://svelte.dev/e/mixed_event_handler_syntaxes ([mixed_event_handler_syntaxes](https://svelte.dev/docs/svelte/compiler-errors#mixed_event_handler_syntaxes))

[paoloricciuti]

This is what they are referring to

https://svelte.dev/docs/svelte/svelte-events#on

[kepzAT]

Ok got it! Tried it out and it works. Thanks for the help @MotionlessTrain, @Conduitry, @paoloricciuti!