커스텀 컴포넌트의 이벤트를 흐리게 하기 위해 eventListener를 추가하시겠습니까?

커스텀 컴포넌트의 이벤트를 흐리게 하기 위해 eventListener를 추가하시겠습니까?

내 컴포넌트는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
        });
    },
});

입력 이벤트가 발생하는 동안 흐림 이벤트가 발생하지 않는 이유는 무엇입니까?

블러 이벤트를 발생시키려면 어떻게 해야 합니까?

흐릿한 이유는 무엇입니까?

당신은 그 사람을 고르는 것이 아닙니다.blur인수를 지정하지 않았기 때문입니다.이벤트가 거품이 일지 않기 때문에 필수입니다.이 때문에,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()에 있습니다.v-ons, 그<input>네이티브 이벤트도 트리거합니다.blur그리고.input.

그래서 실제로 두 가지 종류의 이벤트가 있습니다.blur에 대해 두 개input(아래 데모 참조).

왜 그래?$emit()?

$emit()Vue 내부입니다.일부 또는 ★★ Vue 인스턴스 이벤트 인터페이스입니다.

.addEventListener()네이티브 DOM 이벤트용입니다.를 리슨합니다만 리슨할 수 없습니다.$emit()s.

Vue의 노래를 들으려면$emit()s Vue를 사용해야 합니다..$on().

아래 데모를 참조하십시오.주의:e(이벤트) 오브젝트.$on()및 에서.addEventListener()다릅니다.

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>

언급URL : https://stackoverflow.com/questions/49311741/adding-eventlistener-to-blur-event-on-custom-component