Question

我遇到了一个问题，我想传递一个＆＃39;事件＆＃39;从JQuery eventListener调用的函数的参数。

$('#todoRemove').on('click', this.removeTask(event));

这会在页面加载时立即调用该函数，然后在按下可以启动事件的按钮时不起作用。我可以改变什么来调用原型中的方法，但传递事件参数？

    TaskCtrlr.prototype = {
    init: function () {
        this.setupEventHandlers();
    },
    setupEventHandlers: function () {
        $('#addTask').on('click', this.addTask.bind(this));
        $('#todoRemove').on('click', this.removeTask.bind(this));
/*      $('#todoComplete').on('click', this.completeTask.bind(this));
        $('#doneRemove').on('click', this.removeTask.bind(this));*/
    },
    addTask: function () {
        let taskInput = this.view.getTaskInput();

        let newTask;
        if (this.model.tasks.todo.length == 0) {
            newTask = new Task(0, taskInput.title, taskInput.desc, false);
        } else {
            let id = this.model.tasks.todo[this.model.tasks.todo.length - 1].id + 1;
            newTask = new Task(id, taskInput.title, taskInput.desc, false);
        }

        this.model.addTask(newTask);
        this.view.addTodoTask(newTask);
    },
    completeTask: function (event) {
        console.log('wwwwww');
        console.log(event.target.id);
    },
    removeTask: function (event) {
        console.log('eeeeee');
        console.log(event.target.id);
    }
};

编辑：当前解决方案

$('#todoRemove').on('click', event, removeTask);

错误：

jQuery.Deferred异常：removeTask未定义ReferenceError： removeTask未定义

Answer 1

为什么要传递event？它甚至指的是什么？

事件对象由事件处理程序的调用者传递，即jQuery。你应该和其他处理程序完全一样：

$('#todoRemove').on('click', this.removeTask.bind(this));

jQuery会将事件对象传递给函数，而无需执行任何操作。

Answer 2

这会在页面加载时立即调用该函数

$('#todoRemove').on('click', this.removeTask(event));

是的，它会调用它，因为在注册回调期间，您并没有真正注册回调，而是使用此代码调用您的函数：

this.removeTask(event)

相反，你需要这样做。我不确定什么事件，但你可以使用第二个参数传递回调：

$('#todoRemove').on('click', event, removeTask);

您可以像这样定义removeTask：

function removeTask( event ) {
  //...
}

这是一个你可以玩的例子来舒服：

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );

如果你没有传递任何东西，jQuery仍会将a参数传递给你，其中包含事件信息，如下所示：

function greet2( event ) {
  alert( "Hello " + event.target.id );
}
$( "button" ).on( "click", greet2 );

还有更多信息here。

<== Fiddle Me ==>

将参数传递给绑定函数

2 个答案: