Event Dispatcher

Dispatch custom events in the browser.

Usage

<script>
    import { eventDispatcher } from "@sveu/browser"

    const dispatch = eventDispatcher(element)
</script>
<script>
    import { eventDispatcher } from "@sveu/browser"

    const dispatch = eventDispatcher(element)
</script>
svelte

Example

Counter: 0
Counter from the event: 0 
<script>
    import { on, eventDispatcher } from "@sveu/browser" 

    let counter = 0

    let counter_event = 0

    function clicked(node) {
        const dispatch = eventDispatcher(node) 

        const cleanup = on(node, "click", () => {
            dispatch("clicked", ++counter) 
        })

        return {
            destroy() {
                cleanup()
            },
        }
    }
</script>
Counter: {counter}

<br/>

Counter from the event: {counter_event}

<br/>

<button use:clicked on:clicked="{(e) => counter_event = e.detail}">Click me</button>
<script>
    import { on, eventDispatcher } from "@sveu/browser" 

    let counter = 0

    let counter_event = 0

    function clicked(node) {
        const dispatch = eventDispatcher(node) 

        const cleanup = on(node, "click", () => {
            dispatch("clicked", ++counter) 
        })

        return {
            destroy() {
                cleanup()
            },
        }
    }
</script>
Counter: {counter}

<br/>

Counter from the event: {counter_event}

<br/>

<button use:clicked on:clicked="{(e) => counter_event = e.detail}">Click me</button>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Click fold/expand code

API

Arguments

Name Description Type Required
target The element to dispatch the event on. HTMLElement or SVGElement or null or undefined Yes


Returns

Name Description Type
dispatch The function to dispatch the event (name: string, value: T) => void
Last update at: Invalid Date