Event Types


There is many ways you can listen and trigger events in your pages

Basic Events

There is 2 types of basic events used

1. Javascript DOM events


The target(s) are picked using Xpath

2. Observe event

Basically any change on this element html or attribute will trigger the observe event

Custom Events

Svelte offers a way to trigger events inside components with createEventDispatcher 
With this feature we can select a component with Xpath and writedown the custom event that we want to listen to.

<script>
 import {createEventDispatcher} from "svelte"
 const dispatch = createEventDispatcher()

 function triggerDelete(){
   dispatch("delete", 1)
 }
</script>

<div>
 <button on:click={triggerDelete}>delete</button>
</div>


Then use the source component props to trigger the event

<script>
  // remember to export this method
  export function deleteElm(index){
   arr_elms = arr_elms.splice(index,1)
   arr_elms = arr_elms
  }
</script>

<!-- Html code -->

Propagate event listener

if you have you use child components inside the source component, you need to propagate the event listener like this

<!-- App.svelte -->
<script>
 import CmpChild from "CmpChild.svelte"
</script>

<!-- CmpChild trigger the delete event -->
<CmpChild on:delete />

Then write the dispatch event inside the CmpChild.svelte