本文主要介绍Vue3中的常见的监听事件submit、mouseenter和mouseleave。

我们在提交表单的时候，可以使用@submit指令或者v-on:submit指令来绑定submit事件。submit事件通常与表单元素一起使用，例如、和。当用户点击表单中的提交按钮时，submit事件将被触发。

以下是submit点击事件的详细介绍：

在上面的例子中，@submit指令绑定了handleSubmit方法，当用户点击提交按钮时，handleSubmit方法将被调用。在handleSubmit方法中，我们首先使用event.preventDefault()方法阻止表单的默认提交行为，然后可以在方法中处理提交的逻辑。

注意：使用event.preventDefault()方法可以防止表单默认的提交行为，可以根据需要进行调用。在处理完提交逻辑之后，可以选择性地使用event.target.reset()方法来重置表单的值。

可以使用下列方法控制"input"事件的冒泡行为：

这些修饰符可以单独使用，也可以组合使用。例如，你可以同时使用.stop和.prevent来停止冒泡并阻止默认行为：

这里的handleInput是一个在Vue组件中定义的方法，它会在"input"事件触发时被调用。这个方法可以接收一个事件对象作为参数，你可以使用这个参数来访问事件的属性和方法。

mouseenter事件是一种用于处理鼠标指针进入元素的事件。当鼠标指针从元素的外部移动到元素的内部时，mouseenter事件将被触发。

使用@mouseenter指令或v-on:mouseenter指令来监听mouseenter事件。例如：

当鼠标指针移入元素时，handleMouseEnter方法将被触发，并在控制台中打印出"鼠标移入了元素"。

需要注意的是，与mouseenter事件相对应的是mouseleave事件，用于处理鼠标指针离开元素的事件。

mouseleave事件是鼠标离开元素时触发的事件。与mouseout事件不同的是，mouseleave事件不会冒泡，即只有鼠标光标离开具体元素时才会触发，而不会在离开元素的子元素时触发。

要在Vue3中使用mouseleave事件，可以通过在模板中直接使用@mouseleave指令或在组件实例中使用@mouseleave事件监听器来绑定事件。

以下是在Vue3中使用mouseleave事件的示例：

在上面的示例中，当鼠标离开元素时，handleMouseLeave方法会被调用，并在控制台上打印出"mouseleave事件被触发"的消息。

mouseleave事件不会在Vue组件的子组件中触发。如果需要在子组件中使用mouseleave事件，可以使用事件派发机制或Vue的自定义事件来实现。

Vue3中的mouseleave事件是在鼠标离开元素时触发的事件，可以通过在模板中使用@mouseleave指令或在组件中使用@mouseleave事件监听器来绑定事件。

在使用mouseenter和mouseleave事件时，需要注意以下几个地方：

区别于mouseover和mouseout：mouseenter和mouseleave事件是不冒泡的，而mouseover和mouseout事件是冒泡的。因此，在使用mouseenter和mouseleave时，要确保它们是适合你的场景的，而不是错误地使用mouseover和mouseout。

事件绑定方式：在Vue 3中，可以使用@mouseenter和@mouseleave指令来绑定mouseenter和mouseleave事件。 例如：

这里的handleMouseEnter和handleMouseLeave是在Vue组件中定义的方法，它们会在对应的事件触发时被调用。

注意事件委托：由于mouseenter和mouseleave事件不冒泡，因此无法通过事件委托来处理动态添加的子元素。如果需要处理动态添加的子元素的mouseenter和mouseleave事件，可以考虑使用Vue 3提供的v-on指令结合父子组件通信来实现。

慎用mouseover和mouseout：由于mouseover和mouseout事件在冒泡阶段触发，可能会导致与mouseenter和mouseleave事件冲突，因此在使用mouseenter和mouseleave时，最好避免同时使用mouseover和mouseout。

这些是使用mouseenter和mouseleave事件时需要注意的地方。根据具体的场景和需求，合理选择事件来实现你的功能，并遵循Vue 3的事件绑定方式。