jquery - 如何将事件和参数传递给 javascript 函数？

Question

我有以下内容：

var oTable = $('#dataTable').dataTable({
    iDisplayLength: -1,
    ...
    ...

$("#dataTable tbody").on("click", "tr", gridClickHandler);

function gridClickHandler(oTable) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(this).addClass('row_selected');

有人告诉我 $(this) 事件将传递给函数，但我还需要传递其他内容，因为我发现它给出了与 oTable 相关的错误。

如何修改对 gridClickHandler 和 gridClickHandler 函数的调用，以便它传递对 oTable 的引用，并且 $(this) 也可以工作。

Answer 1

您可以使用匿名函数：

$("#dataTable tbody").on("click", "tr", function(event) { gridClickHandler(oTable); } );

Answer 2

如果变量oTable在外部范围内声明，gridClickHandler函数将可以访问它，因此您不需要手动传递它。事实上，事件处理程序接收事件对象作为第一个参数，因此您实际上是在隐藏TABLE 引用。

例如：

var foo = 123;

var clickHandler = function ( foo ) {    
    // here, foo is not 123, but the event object  
    // the outer variable foo is shadowed by the local variable foo  
};

只需删除第一个参数：

var gridClickHandler = function () {

现在，oTable从外部范围检索。

（另请注意，我如何将匿名函数表达式分配给变量，而不是使用函数声明。）

顺便说一句，在函数内部，this指的是 TR 元素。

Answer 3

试试这个：

$("#dataTable tbody").on("click", "tr", gridClickHandler);
gridClickHandler.oTable = oTable;

function gridClickHandler(event) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(event.target).addClass('row_selected');
}