添加 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>

我正在尝试通过自定义指令addEventListeners 对标签进行自定义验证。

<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() 发出的内容。 事实并非如此。

您可能会明白这一点，因为除了您的v-ons 中的$emit()s 之外，<input> 将也触发原生事件blur 和input。

所以你实际上有两种不同类型的事件blur 和两种input（见下面的演示）。

$emit() 怎么了？

$emit() 是 Vue 内部的。它是零件或every Vue 实例events interface。

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

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

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

Vue.component('my-comp', {
  template: '#styled-input-tpl',
  props: ['value']
});

Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    vnode.componentInstance.$on('blur', function (e) {
      console.log('received $on(blur) - event value:', event);
    });
    vnode.componentInstance.$on('input', function (e) {
      console.log('received $on(input) - event value:', e);
    });
    
    el.addEventListener('blur', (e) => {
      console.log('received NATIVE(blur) - event value:', e.target);
    }, true);  // <======================================================= IMPORTANT
    
    el.addEventListener('input', (e) => {
        console.log('received NATIVE(input) - event value:', e.target);
    });
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

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

<div id="app">
  Edit the input, focus out, and check the console.
  <my-comp v-my-directive :value="'edit me'"></my-comp>
</div>