将参数传递给绑定函数

Question

我遇到了一个问题，我想将一个'event'参数传递给正从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); 

还有更多信息here。

<== Fiddle Me ==>