Невозможно вызвать функцию, используя document.getElementById («пароль»). AddEventListener () с веб-пакетом и настройкой ES6 - PullRequest
Новая
       16

Невозможно вызвать функцию, используя document.getElementById («пароль»). AddEventListener () с веб-пакетом и настройкой ES6

0 голосов
/ 14 октября 2018

Я использую webpack & ES6 классы .Я пытаюсь вызвать функцию ' onblur ' для ввода # пароля, но она не работает.Он не выдает никакой ошибки и не вызывает функцию обратного вызова.Если я пытаюсь найти input # password вне eventListener, используя console.log (document.getElementById ('password')), то он дает мне input # password в качестве объекта DOM.Я не знаю, где я иду не так с этим.Ниже мой код:

index.html 

    <head>
      <script src="./bundle.js"></script>
    </head>
    <body>
       <input id="password" type="password" placeholder="Please enter your password" autofocus="autofocus">
    </body>

webpack-config.js 

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist')
    }
};

index.js 

import { Password } from './app/main';

document.getElementById('password').addEventListener('onblur', () => {
    console.log('im here');
    var initPwd = new Password();
    initPwd.init();
})

main.js 

class Password {
    init() {
        console.log('I am inside init.')
    }
}

export { Password }

Пожалуйста, помогите!

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Проблема в том, что имя события равно blur, в то время как вы можете назначать обработчики, присваивая свойству onblur элемента.Они не одинаковы, что может немного сбивать с толку.

Когда вы присоединяете слушателя, присваивая свойству, вы используете синтаксис <element>.on<eventName>, например: 

element.onclick = () => ...
element.onblur = () => ...

Когдавы используете addEventListener, вы просто используете простое имя события: 

element.addEventListener('click', () => ...
element.addEventListener('blur', () => ...

Итак, измените на: 

document.getElementById('password').addEventListener('blur', () => {


document.getElementById('password').addEventListener('blur', () => {
  console.log('blur');
});
<input id="password" type="password" placeholder="Please enter your password" autofocus="autofocus">
0 голосов
/ 14 октября 2018 
document.getElementById('password').addEventListener('onblur', () => {

=> 

document.getElementById('password').addEventListener('blur', () => {

onblur будет работать с element.onblur = function() {}, поэтому при использовании интерфейса addEventListener не следует писать on в имени события.

...