Por qué bind() pasa incluso el tipo de evento con parámetros de descanso. ¿Cómo evitar pasar el evento 'clic'?
function say(...numbers) { for (const number of numbers) { console.log(number); } } window.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('input_10_5'); el.addEventListener('click', say.bind(null, 1, 2, 3)); });Resultado de Console.log:
1 2 3 click { target: input#input_10_5.medium, buttons: 0, clientX: 1062, clientY: 732, layerX: 96, layerY: 24}
no puedes El sistema de manejo de eventos siempre pasa el evento.
La función de devolución de llamada en sí misma tiene los mismos parámetros y valor de retorno que el método handleEvent(); es decir, la devolución de llamada acepta un único parámetro: un objeto basado en Evento que describe el evento que ha ocurrido, y no devuelve nada.
Si su objetivo es iterar los argumentos y tratarlos de la misma manera, ¿qué tal: function say(numbers, event) decir. say.bind(null, [1, 2, 3])
Este comportamiento no tiene que ver con los parámetros de descanso ... . Tiene más que ver con el comportamiento de .bind() . Cuando vincula una función con argumentos (en este caso, usó 1, 2, 3 ), llamar a esa función vinculada hace que esos argumentos vinculados se pasen primero a la función, luego seguidos por cualquier argumento adicional con el que llame a la función vinculada , p.ej:
function foo(one, two, three, evt) { console.log(one, two, three, evt); } const bar = foo.bind(null, 1, 2, 3); bar({type: "click"}); // becomes the 4th argument (after 1, 2, 3) Bajo el capó, JavaScript está llamando a su función enlazada que pasa a .addEventListener() con el objeto de evento, que termina convirtiéndose en el cuarto argumento de su función say . Esto luego se incluye como parte de la matriz de numbers . En su lugar, puede crear una función contenedora que pase el event (que ignora) y luego usar .call() para llamar a su función (usar .call() aquí en lugar de solo () le permite definir explícitamente this valor como usted estamos haciendo con .bind() ):
window.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('input_10_5'); el.addEventListener('click', () => say.call(null, 1, 2, 3)); });Mira la documentación :
El método bind() crea una nueva función que, cuando se llama, tiene su palabra clave this establecida en el valor proporcionado, con una secuencia dada de argumentos que preceden a los proporcionados cuando se llama a la nueva función .
No puedes evitar que bind haga eso.
Si no quieres eso, no uses bind .
Simplemente cree una nueva función de la manera tradicional en su lugar.
el.addEventListener('click', function () { say(1, 2, 3) });