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) => {

JS Ojbect事件onkeyup

1 个答案: