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

list can be found here https://www.w3schools.com/jsref/dom_obj_event.asp

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