связывание и обработчик события - передавая объект события

Question

У меня есть некоторые образцы кода, который связывает обработчик события следующим образом:

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. Во всех случаях значение правильно установлено на h1, но в последнем случае переданный параметр отображается , заменив ожидаемым объектом события.

Как сохранить объект события без перезаписи обработчика события как выражение функции?

Answer 1

, но в последнем случае, передаваемый параметр, как представляется, заменить ожидаемый объект события.

Использование bind создает функцию с заранее заданными начальными аргументами.

MDN Docs:

Эти аргументы (если таковые имеются) следовать при условии this значение и затем вставляется в начале аргументов, передаваемых в целевой функции, за которым следуют аргументы, передаваемые к связанному функции, всякий раз, когда связанная функция.

Что означает, если вы:

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

Значение this обязан h1 как вы уже упоминали, но событие из onclick передается в качестве второго аргумента к doit, вместо первого, поскольку вы связали 1 с первым аргументом. Таким образом, вы все еще получаете событие, оно не заменяется, оно просто передается после всех связанных аргументов.

Как сохранить объект события без перезаписи обработчика события как выражение функции?

Вы не можете. Событие будет передано после всех аргументов, которые вы ранее связали с функцией, чтобы вы учитывали это. Для данного случая, doit будет выглядеть так:

function doit(one, e) { 
    console.log(this, one, e); // on click logs: h1 object, 1, event object 
} 

Answer 2

Если вы отметите 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();