[svelte]事件

DOM events

<script>
	let m = { x: 0, y: 0 };

	function handleMousemove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

<style>
	div { width: 100%; height: 100%; }
</style>

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

on:mousemove 是一个事件绑定的语法，它用于将 handleMousemove 函数与 <div> 元素的 mousemove 事件关联起来。on:mousemove 表示当鼠标在 <div> 元素内发生移动时触发 handleMousemove 函数。

因此，当鼠标在 <div> 元素内移动时，浏览器会触发 mousemove 事件，并调用 handleMousemove 函数来处理该事件。

DOM（文档对象模型）事件是指在浏览器中操作网页元素时触发的事件。这些事件允许 JavaScript 在特定的DOM元素上执行代码，以响应用户的交互或其他操作。以下是一些常见的 DOM 事件：

鼠标事件：

click：当用户点击鼠标按钮（左键、中键或右键）时触发。
mouseover：当鼠标移动到元素上方时触发。
mouseout：当鼠标从元素上移开时触发。
mousedown、mouseup：当鼠标按下或释放任意按钮时触发。

键盘事件：

keydown、keyup：当用户按下或释放键盘上的键时触发。
keypress：当用户按下键盘上的按键时触发，但是在 keydown 之后、keyup 之前触发。

表单事件：

submit：当用户提交表单时触发。
input：当用户输入内容到表单元素（如 <input>、<textarea>）时触发。
change：当表单元素的值发生变化时触发。

窗口事件：

load：当页面加载完成时触发。
resize：当窗口大小调整时触发。
scroll：当用户滚动页面时触发。

触摸事件（移动设备）：

touchstart、touchend、touchmove：当用户在触摸屏上触摸时触发。

拖放事件：

dragstart、dragend：当拖动元素开始或结束时触发。
dragenter、dragleave、dragover、drop：当拖动元素进入、离开、悬停在某个区域或在某个区域释放时触发。

要在 HTML 中监听 DOM 事件，通常需要使用 on 前缀。在 HTML 中，可以直接使用 on 加上事件名称的方式来指定事件处理函数

内联函数

<script>
	let m = { x: 0, y: 0 };
</script>

<style>
	div { width: 100%; height: 100%; }
</style>

<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
	The mouse position is {m.x} x {m.y}
</div>

使用了一个内联的事件处理器，它通过箭头函数来更新 m 对象的 x 和 y 属性，以记录鼠标的当前位置。在这里，e 是事件对象，它包含有关鼠标移动事件的信息，其中 e.clientX 表示鼠标相对于浏览器窗口的水平位置，e.clientY 表示鼠标相对于浏览器窗口的垂直位置。 这样，每次鼠标在 <div> 元素内移动时，都会更新 m 对象的 x 和 y 属性，并且页面上会显示出当前的鼠标位置

事件修饰符

preventDefault：阻止事件的默认行为。通常用于阻止表单的提交或链接的跳转。

<form on:submit|preventDefault={handleSubmit}>
    <!-- 表单内容 -->
</form>

stopPropagation：阻止事件在 DOM 树中进一步传播，即停止事件冒泡。

<div on:click|stopPropagation={handleDivClick}>
    <!-- div 内容 -->
</div>

capture：将事件监听器添加到捕获阶段而不是冒泡阶段。默认情况下，事件监听器是在冒泡阶段触发的。

<div on:click|capture={handleCaptureClick}>
    <!-- div 内容 -->
</div>

once：指定事件只会触发一次，之后便会自动解绑

<button on:click|once={handleClick}>Click Me Once</button>

passive：指定事件监听器不会调用 preventDefault()，可以提升性能。适用于滚动事件等会频繁触发的事件

<div on:scroll|passive={handleScroll}>
    <!-- div 内容 -->
</div>

self：只有事件是由元素本身触发的时候才会触发事件处理器。防止事件冒泡到父元素后再次触发事件处理器

<div on:click|self={handleDivClick}>
    <!-- div 内容 -->
</div>

可以将修饰符组合在一起使用，例如：on:click|once|capture={...}

组件事件

在 Svelte 中，组件可以定义自己的事件，以便在组件内部触发并将其传递给组件外部。组件事件是一种机制，允许组件与其父组件或其他组件进行通信。以下是组件事件的主要特点和用法：

1.定义事件： 组件可以使用 createEventDispatcher 函数创建一个事件分发器。通过这个分发器，组件可以定义自己的事件名称和事件详情。

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function sayHello() {
    dispatch('message', {
        text: 'Hello!'
    });
}

2.触发事件： 组件内部的逻辑可以通过调用 dispatch 函数来触发自定义事件。在触发事件时，可以传递一些数据作为事件的详情。

3.监听事件： 父组件或其他组件可以监听组件触发的事件，并在事件发生时执行相应的逻辑。

<script>
    import ChildComponent from './ChildComponent.svelte';

    function handleCustomEvent(event) {
        console.log('Received custom event:', event.detail.text);
    }
</script>

<ChildComponent on:message={handleCustomEvent} />

4.传递数据： 组件事件可以携带任意类型的数据作为事件详情，这些数据可以是简单的原始值、对象、数组等

DOM事件转发

DOM 事件转发是指将原生 DOM 事件转发到 Svelte 组件内部的机制。这在某些情况下很有用，特别是当你需要在 Svelte 组件内部处理原生 DOM 事件时。

在 Svelte 中，可以使用 on:eventname 语法来将原生 DOM 事件转发到组件内部。例如，如果你想要将 <button> 元素的点击事件转发到 Svelte 组件内部处理，

<script>
    function handleClick(event) {
        console.log('Button clicked!');
    }
</script>

<button on:click={handleClick}>
    Click me
</button>

在这个例子中，handleClick 函数将会在按钮被点击时被调用，这是通过 on:click 语法将按钮的点击事件转发到组件内部实现的。

在 Svelte 组件中，你可以像处理自定义事件一样处理转发的 DOM 事件。例如，你可以将转发的点击事件与组件内部的逻辑相结合：

<script>
    function handleClick(event) {
        console.log('Button clicked!');
        // 其他逻辑...
    }
</script>

<button on:click={handleClick}>
    Click me
</button>