У меня есть этот код в моем компоненте, который по сути такой же, как пример в стройных документах:
export default {
methods: {
assessmentMouseover(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: 'something',
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
this.dispatchEvent(event)
},
},
...
}
Затем у меня есть этот код в теге script на HTML-странице, который создает этот компонент, который также по сути такой же, как и svelte docs:
const el = document.querySelector('#radar')
el.addEventListener('assessment-mouseover', event => {
console.log('got here')
})
Однако, когда я инициирую событие, я получаю эту ошибку: this.dispatchEvent is not a function.
Я пробовал несколько вариантов this.dispatchEvent(), например, просто dispatchEvent(), который не вызывает ошибок, но также не запускает слушателя; и window.dispatchEvent(), который также не запускается.
Что я делаю неправильно?
Ответ рабочего кейса: https://svelte.technology/repl?version=2.15.3&gist=7b0b820ce452cf6d5d10ebf456627651
Test.html:
<button id="{id}" on:mouseover="doMouseOver(event)">
{isOver}
</button>
<script>
export default {
data() {
return {
isOver: 'Over Me!'
}
},
methods: {
doMouseOver(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: Math.random(),
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
//this.dispatchEvent(event)
let source = e.target || e.srcElement
source.dispatchEvent(event)
}
}
}
</script>
App.html:
<h1>From Test: {text}</h1>
<Test id="radar"/>
<script>
export default {
components: {
Test: './Test.html'
},
data() {
return {
text: 'Wait for over'
}
},
oncreate() {
const el = document.querySelector('#radar')
el.addEventListener('assessment-mouseover', event => {
this.set({text: event.detail})
})
},
}
</script>