Custom Events

我们编写的许多代码涉及对事件的反应，例如I/O事件（如鼠标点击或键盘事件）和网络事件（当您监听HTTP调用时）。这就是我所说的内置事件。 在JavaScript中，我们可以创建自定义事件，并且它在浏览器和Node.js中的工作方式不同。 在前端，我们使用浏览器提供的Event对象： const anEvent = new Event('start'); 您可以使用以下代码触发事件： document.dispatchEvent(anEvent) 当发生这种情况时，事件监听器将被触发： document.addEventListener('start', event => { console.log('started!') }) 您可以使用内置的CustomEvent对象发送自定义数据，而不是使用Event对象，该对象接受一个对象作为第二个参数： const anotherEvent = new CustomEvent('start', { detail: { color: 'white' } }) 在事件监听器中，您可以使用event.detail从事件对象中获取数据（您不能使用其他属性）： document.addEventListener('start', event => { console.log('started!') console.log(event.detail) }) 在后端，Node为我们提供了一种使用events模块构建类似系统的选项。 这个模块特别提供了EventEmitter类，我们将使用它来处理我们的事件。 使用以下代码初始化： const EventEmitter = require('events') const eventEmitter = new EventEmitter() 该对象提供了许多其他方法，其中包括on和emit方法。 emit用于触发事件 on用于在事件触发时添加要执行的回调函数 例如，让我们创建一个start事件，并作为示例，我们只是将其记录到控制台： eventEmitter.on('start', () => { console.log('started') }) 当我们运行以下代码时： eventEmitter.emit('start') 事件处理函数将被触发，并且我们会得到控制台日志。 您可以通过将它们作为额外参数传递给emit()来将参数传递给事件处理程序： eventEmitter.on('start', (number) => { console.log(`started ${number}`) }) eventEmitter....

學習如何在Svelte中處理事件 監聽DOM事件 在Svelte中，你可以使用on:<event>語法在模板中直接定義DOM事件的監聽器。 例如，要監聽click事件，你可以將一個函數傳遞給on:click屬性。 要監聽onmousemove事件，你可以將一個函數傳遞給on:mousemove屬性。 以下是一個範例，其中處理函數在內聯中定義： <button on:click={() => { alert('clicked') }}>點擊我</button> 以下是另一個範例，其中處理函數在組件的script部分中定義： <script> const doSomething = () => { alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 當代碼不太冗長時，我更喜歡內聯。如果只有2-3行，例如，否則我會將其移至組件的script部分。 Svelte將事件處理程序作為函數的參數傳遞，這很方便，如果你需要停止事件傳播或參考事件對象中的某些內容： <script> const doSomething = event => { console.log(event) alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 現在，我提到了“停止事件傳播”。這是一個非常常見的操作，例如停止提交表單事件。Svelte提供了修飾符，可以直接應用它，而無需手動處理。 stopPropagation和preventDefault是你最常使用的兩個修飾符，我想。 你可以這樣應用修飾符：<button on:click|stopPropagation|preventDefault={doSomething}>點擊我</button> 還有其他修飾符，它們更加專業化。capture使事件捕獲而不是冒泡，once只觸發一次事件，self只有當事件的目標是該對象時才觸發該事件（從冒泡/捕獲層次結構中移除）。 在組件中創建自定義事件 有趣的是，我們可以在組件中創建自定義事件，並使用相同的內建DOM事件語法。 要做到這一點，我們必須從svelte包中引入createEventDispatcher函數並調用它以獲取一個事件分發器： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() </script> 一旦這樣做，我們可以調用dispatch()函數，並傳遞一個字符串，用於識別事件（我們將在使用此事件的其他組件中使用on:語法）： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() //當觸發事件的時候 dispatch('eventName') </script> 現在，其他組件可以使用我們的組件，並使用以下方式：...