JS Ojbect Event onkeyup

Question

У меня есть такой модуль:

let Search = {

    settings: {
        inputField: document.getElementById('search_field')
    },
    init: function() {
        this.bindAction();
    },
    bindAction: function() {
        this.settings.inputField.addEventListener("onkeyup", function(e) {
            let value = this.settings.inputField.value;
            console.log(value);
            e.preventDefault();
        })
    }
};

export default Search;

И я импортирую его в основное приложение следующим образом:

import Search from './components/Search';

Search.init();

Но событие onkeyup не срабатывает.

Что я делаю не так?

Answer 1

Нет такого имени события, как onkeyup, поэтому слушатель не срабатывает.Имя события: keyup:

this.settings.inputField.addEventListener("keyup", function(e) {

Вы можете использовать on, когда назначаете слушателя с помощью , присваивая свойству слушателя с помощью точечной нотации, например:

this.settings.inputField.onkeyup = function(e) {

При использовании addEventListener никогда не ставьте префикс имени события on - при назначении свойству всегда ставьте префикс имени события on.

Другая проблема заключается вчто ваш вызывающий контекст неверен для слушателя - внутри слушателя this будет ссылаться на элемент , а не на объект Search.Вместо этого используйте функцию стрелки, чтобы this родительского блока был унаследован:

this.settings.inputField.addEventListener("keyup", (e) => {