Question

我正在尝试将callback与event绑定，但是在传递callback时丢失了事件。这是我的密码

HTML：

<button id="click">click</button>

JavaScript：

<script>
    class T {
        handler (e, c) {
            console.log(e)
            console.log(typeof c)
            //c(e)
        }

        run () {
            document.getElementById('click').addEventListener('click', this.handler.bind(this, e => {
                console.log(e)
            }))
        }
    }

    (new T).run()
</script>

当我不通过callback时，event被正确记录。这里的代码

handler (e) {
   console.log(e)
}

run () {
  document.getElementById('click').addEventListener('click', this.handler.bind(this))
}

现在，如何将event和callback都传递给处理程序？

Answer 1

您同时获得了回调和事件。像这样修改代码，您会看到调用了回调。您的第一个参数是回调，第二个是事件。

class T {
        listener (e, c) {
            console.log(e);
            console.log(typeof c);
			e();
            //c(e)
        }

        run () {
            document.getElementById('click').addEventListener('click', this.listener.bind(this, e => {
                console.log('I am called');
            }));
        }
    }

    (new T).run();

<button id="click">click</button>

您将看到调用了回调，并且看到了“我被呼叫”。但是，您应该修改参数以正确命名它们。 e，第一个参数看起来不像回调，而第二个参数类似。

Answer 2

我不会绑定函数，而是这样做：[..].addEventListener('click', event => this.listener(event, cb))

在这里查看原因：Event Listener in Class Context

Answer 3

function handleClickListener(e, callback) {
  console.log('clicked');
  callback(e);
}

function startListener() {
  document.addEventListener('click', e => handleClickListener(e, (e) => console.log(e)));
}

startListener()

将参数传递给bind（）时事件丢失

3 个答案: