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
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