Javascript JS Ojbect事件onkeyup

我有这样一个模块：

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事件不会触发

---

我做错了什么？

没有像onkeyup这样的事件名称，因此侦听器不会启动。事件名称为

keyup

：

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

通过使用点表示法指定侦听器属性来指定侦听器时，可以在上使用

，例如：

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

使用
addEventListener
时，切勿在事件名称前面加上
on
——分配给属性时，始终在事件名称前面加上
on

另一个问题是，您的调用上下文对于侦听器是错误的-在侦听器中，
此
将引用元素，而不是
搜索
对象。改为使用箭头函数，以便继承父块的
this
：

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