Question

将参数传递给绑定函数

2017-10-13

95

javascript jquery

我遇到了一个问题，我想将“事件”参数传递给从 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 exception: removeTask is not defined ReferenceError: removeTask is not defined

Answer 1

为什么要传递 event ？它到底指什么？

事件对象由事件处理程序的调用者传递，即 jQuery。您应该执行与其他处理程序完全相同的操作：

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

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

Answer 2

This immediately calls the function when the page is loaded

$('#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 仍会将一个参数传递给您，其中包含事件信息，如下所示：

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

更多信息请见这里。

<== Fiddle Me ==>