添加eventListener以模糊自定义组件上的事件？

Question

我有一个名为styled-input的组件，它是一个带有样式，图标，验证等的输入。

我试图在自定义指令中使用addEventListener来监听事件并使事情发生。

<styled-input
    v-model=""
    v-on:input=""
    v-on:blur=""
></styled-input>

内部： value是道具（允许外v-model绑定）

<template>
    <div>
        <input 
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            v-on:blur="$emit('blur', $event.target.value)"
        />
    </div>
</template>

我尝试addEventListener通过自定义指令进行自定义验证。

<styled-input
    v-model=""
    v-custom-validator:credit-card
></styled-input>

在指令中我使用addEventListener来监听输入字段中的事件。

Vue.directive('custom-validator', {
    bind: function(el, binding) {
        el.addEventListener('blur', (event) => {
            // Does not fire
        });

        el.addEventListener('input', (event) => {
            /// Fires
        });
    },
});

为什么模糊事件不会触发，而输入事件会触发？

如何触发模糊事件？

Answer 1

为什么模糊失败

您没有选择blur，因为您没有指定useCapture argument。这是强制性的，因为blur event does not bubble。因此，添加useCapture可以解决您的问题：

el.addEventListener('blur', (e) => {
  // it will work now
}, true); // useCapture is the third argument to addEventListener

不要将Native DOM事件与Vue事件混淆

从您的代码（并参见下面的演示）中，似乎，当blur和input被触发时，.addEventListener()会选择发出的内容按$emit()。 情况并非如此。

您可能会得到这个想法，因为除了$emit()的{​​{1}}之外，v-on 还会触发原生事件{{1} }和<input>。

所以你实际拥有的是blur的两种不同的事件，input的两种事件（见下面的演示）。

blur是什么？

input是Vue内部的。它是一个部分或every Vue实例events interface。

$emit()适用于原生DOM事件。它会收听.dispatchEvent()s，而不是$emit() s。

要收听Vue的.addEventListener()，您必须使用Vue $emit()。

见下面的演示。请注意$emit()和.$on()中的e（事件）对象不同。

.$on()

.addEventListener()