代码之家  ›  专栏  ›  技术社区  ›  Manngo

传递事件对象的绑定和事件处理程序

  •  7
  • Manngo  · 技术社区  · 9 年前

    我有一些绑定事件处理程序的示例代码,如下所示:

    var h1=document.querySelector('h1');
    h1.onclick=doit;
    
    function doit(x) {
            console.log(x);
    }
    

    当触发事件处理程序时(通过单击 h1 元素),输出为 event 对象。

    如果我按如下方式绑定事件处理程序:

    h1.onclick=doit.bind(h1);
    

    我得到了同样的结果。

    但是,如果我按如下方式绑定:

    h1.onclick=doit.bind(h1,1);
    

    我明白了 1 ,后面的第一个参数 h1小时 在所有情况下 this 已正确设置为 h1小时 ,但在最后一种情况下,传递的参数似乎是 代替 预期的事件对象。

    如何在不将事件处理程序重写为函数表达式的情况下保留事件对象?

    2 回复  |  直到 9 年前
        1
  •  9
  •   nem035    9 年前

    但在最后一种情况下,传递的参数似乎会替换预期的事件对象。

    使用 bind 使用预先指定的初始参数创建函数。

    MDN Docs:

    这些参数(如果有)遵循提供的 this 值,然后插入到传递给目标函数的参数的开头,然后插入传递给绑定函数的参数,无论何时调用绑定函数。

    这意味着,如果您这样做:

    h1.onclick=doit.bind(h1,1);
    

    的价值 一定要 h1 正如您所提到的,但来自 onclick 作为 第二个参数 doit ,而不是第一个,因为你 1 第一个参数。所以您仍然在获取事件,它没有被替换,它只是在所有绑定参数之后传递。

    如何在不将事件处理程序重写为函数表达式的情况下保留事件对象?

    你不能。事件将在您之前绑定到函数的所有参数之后传递,因此您必须考虑到这一点。对于给定的情况, 小木偶 看起来像:

    function doit(one, e) {
      console.log(this, one, e); // on click logs: h1 object, 1, event object
    }
    
        2
  •  0
  •   Jhecht    9 年前

    如果你退房 this link 它表示第一个参数之后的参数成为传递给函数的第一个参数。

    如果只使用h1元素调用它,则只需将函数绑定到h1元素。如果在第二个参数中传递任何其他参数,它将成为传递给函数的第一个参数。

    示例

    function testing(a, b, c) {
      console.log(this.property, a, b, c);
    }
    
    var obj = {
      property: 'value!'
    };
    
    var bound_test = testing.bind(obj, 'Bound Test A');
    bound_test('test 1', 'checking console output');
    bound_test() // should give two undefined in console since we are only giving the first object.
    
    var bound2_test = testing.bind(obj, 'Bound test B', 'something ');
    bound2_test('this will be the "c" argument');
    
    var bound3_test = testing.bind(obj, 'Bound test C', 'Test', ' another, yet different test.');
    bound3_test();