DOM events

我想根据鼠标悬停状态来显示或隐藏一个小面板。 当我悬停在链接上时，面板会显示出来。 然后我可以用鼠标进入这个面板，当我移开鼠标时，面板会隐藏起来。 就像Twitter上的个人资料，在鼠标悬停在一个人的名字上时会显示出来： 对于触发面板显示的<a>元素，我添加了onMouseEnter事件： <a onMouseEnter={() => { setShowCard(true) }} >flavio</a> 所以当我用鼠标悬停在它上面时，面板会显示出来，因为它是根据我之前设置的showCard状态变量来显示的： const [showCard, setShowCard] = useState(false) 然后我有一个ProfileCard组件，但是我不能简单地这样做： <ProfileCard onMouseEnter={() => { setShowCard(true) }} onMouseLeave={() => { setShowCard(false) }} /> 因为它不起作用。ProfileCard不是一个DOM元素，所以它无法响应被触发的事件。 我必须将onMouseEnter和onMouseLeave作为props传递给ProfileCard组件，然后在组件内部找到可以接收这些事件的正确DOM元素，并在那里附加事件处理程序。在这种情况下，我使用了容器div： const ProfileCard = ({ onMouseEnter, onMouseLeave }) => ( <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}> ... 现在当离开面板时，它会隐藏起来。

學習如何在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> 現在，其他組件可以使用我們的組件，並使用以下方式：...