javascript - español - addeventlistener typescript
¿Cómo pasar argumentos a la función de escucha addEventListener? (23)
¿Por qué no obtener los argumentos del atributo de destino del evento?
Ejemplo:
var someInput = document.querySelector(''input'');
someInput.addEventListener(''click'', myFunc, false);
someInput.myParam = ''This is my parameter'';
function myFunc(evt)
{
window.alert( evt.target.myParam );
}
JavaScript es un lenguaje orientado a prototipos, recuerda!
La situación es algo así como
var someVar = some_other_function();
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
El problema es que el valor de someVar no es visible dentro de la función de escucha de addEventListener , donde probablemente se trata como una nueva variable.
Aquí hay otra manera (esta funciona dentro de los bucles):
var someVar = some_other_function();
someObj.addEventListener("click",
function(theVar){
return function(){some_function(theVar)};
}(someVar),
false);
El siguiente código funcionó bien para mí (firefox):
for (var i=0; i<3; i++) {
element = new ... // create your element
element.counter = i;
element.addEventListener(''click'', function(e){
console.log(this.counter);
... // another code with this element
}, false);
}
Salida:
0
1
2
El siguiente enfoque funcionó bien para mí. Modificado desde here .
function callback(theVar) {
return function() {
theVar();
}
}
function some_other_function() {
document.body.innerHTML += "made it.";
}
var someVar = some_other_function;
document.getElementById(''button'').addEventListener(''click'', callback(someVar));
<!DOCTYPE html>
<html>
<body>
<button type="button" id="button">Click Me!</button>
</body>
</html>
Enviar argumentos a la función de devolución de llamada de un eventListener requiere crear una función aislada y pasar argumentos a esa función aislada.
Aquí hay una pequeña función de ayuda que puedes usar. Basado en el ejemplo de "hola mundo" anterior.)
Una cosa que también se necesita es mantener una referencia a la función para que podamos eliminar al oyente limpiamente.
// Lambda closure chaos.
//
// Send an anonymous function to the listener, but execute it immediately.
// This will cause the arguments are captured, which is useful when running
// within loops.
//
// The anonymous function returns a closure, that will be executed when
// the event triggers. And since the arguments were captured, any vars
// that were sent in will be unique to the function.
function addListenerWithArgs(elem, evt, func, vars){
var f = function(ff, vv){
return (function (){
ff(vv);
});
}(func, vars);
elem.addEventListener(evt, f);
return f;
}
// Usage:
function doSomething(withThis){
console.log("withThis", withThis);
}
// Capture the function so we can remove it later.
var storeFunc = addListenerWithArgs(someElem, "click", doSomething, "foo");
// To remove the listener, use the normal routine:
someElem.removeEventListener("click", storeFunc);
Esta pregunta es antigua, pero pensé que ofrecería una alternativa utilizando la .bind () de ES5 - para la posteridad. :)
function some_func(otherFunc, ev) {
// magic happens
}
someObj.addEventListener("click", some_func.bind(null, some_other_func), false);
Solo tenga en cuenta que necesita configurar su función de escucha con el primer parámetro como el argumento que está pasando al enlace (su otra función) y el segundo parámetro ahora es el evento (en lugar del primero, como lo habría sido) .
Esta solución puede ser buena para mirar
var some_other_function = someVar => function() {
}
someObj.addEventListener(''click'', some_other_function(someVar));
o ligas valiables también serán buenas
Hay una variable especial dentro de todas las funciones: argumentos . Puede pasar sus parámetros como parámetros anónimos y acceder a ellos (por orden) a través de la variable de argumentos .
Ejemplo:
var someVar = some_other_function();
someObj.addEventListener("click", function(someVar){
some_function(arguments[0]);
}, false);
La siguiente respuesta es correcta, pero el código siguiente no funciona en IE8 si suponemos que comprimió el archivo js con yuicompressor. (De hecho, todavía la mayoría de los pueblos de Estados Unidos usan IE8)
var someVar;
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click",
function(){
some_function(someVar);
},
false);
Entonces, podemos solucionar el problema anterior de la siguiente manera y funciona bien en todos los navegadores
var someVar, eventListnerFunc;
someVar = some_other_function();
eventListnerFunc = some_function(someVar);
someObj.addEventListener("click", eventListnerFunc, false);
Espero que sea útil para alguien que está comprimiendo el archivo js en el entorno de producción.
¡¡Buena suerte!!
Me quedé atrapado en esto, ya que lo estaba usando en un bucle para encontrar elementos y agregarle un listner. Si lo estás utilizando en un bucle, esto funcionará perfectamente
for (var i = 0; i < states_array.length; i++) {
var link = document.getElementById(''apply_''+states_array[i].state_id);
link.my_id = i;
link.addEventListener(''click'', function(e) {
alert(e.target.my_id);
some_function(states_array[e.target.my_id].css_url);
});
}
Necesitas:
newElem.addEventListener(''click'', {
handleEvent: function (event) {
clickImg(parameter);
}
});
No hay absolutamente nada de malo en el código que has escrito. Tanto some_function y someVar deben ser accesibles, en caso de que estuvieran disponibles en el contexto donde anónimo
function() { some_function(someVar); }
fue creado.
Verifique si la alerta le proporciona el valor que estaba buscando, asegúrese de que esté accesible en el ámbito de la función anónima (a menos que tenga más código que opere en la misma variable someVar junto a la llamada a addEventListener )
var someVar;
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
Otra alternativa, tal vez no tan elegante como el uso de vinculación, pero es válida para eventos en un bucle
for (var key in catalog){
document.getElementById(key).my_id = key
document.getElementById(key).addEventListener(''click'', function(e) {
editorContent.loadCatalogEntry(e.srcElement.my_id)
}, false);
}
Se ha probado para las extensiones de Google Chrome y tal vez e.srcElement debe ser reemplazado por e.source en otros navegadores.
Encontré esta solución usando el comment publicado por iMatoria pero no puedo marcarlo como útil porque no tengo suficiente reputación: D
Pregunta bastante antigua, pero hoy tuve el mismo problema. La solución más limpia que encontré es usar el concepto de currying.
El código para eso:
someObj.addEventListener(''click'', some_function(someVar));
var some_function = function(someVar) {
return function curried_func(e) {
// do something here
}
}
Al nombrar la función al curry, le permite llamar a Object.removeEventListener para anular el registro del eventListener en un tiempo de ejecución posterior.
Prueba también estos (IE8 + Chrome. No sé para FF):
function addEvent(obj, type, fn) {
eval(''obj.on''+type+''=fn'');
}
function removeEvent(obj, type) {
eval(''obj.on''+type+''=null'');
}
// Use :
function someFunction (someArg) {alert(someArg);}
var object=document.getElementById(''somObject_id'') ;
var someArg="Hi there !";
var func=function(){someFunction (someArg)};
// mouseover is inactive
addEvent (object, ''mouseover'', func);
// mouseover is now active
addEvent (object, ''mouseover'');
// mouseover is inactive
Espero que no haya errores tipográficos :-)
Puede agregar y eliminar los eventlisteners con argumentos declarando una función como una variable.
myaudio.addEventListener(''ended'',funcName=function(){newSrc(myaudio)},false);
newSrc es el método con myaudio como parámetro funcName es la variable de nombre de función
Puede eliminar el oyente con myaudio.removeEventListener(''ended'',func,false);
Puede pasar Somevar por valor (no por referencia) a través de una función de javascript conocida como closures :
var someVar=''origin'';
func = function(v){
console.log(v);
}
document.addEventListener(''click'',function(someVar){
return function(){func(someVar)}
}(someVar));
someVar=''changed''
O puede escribir una función de wrapEventCallback común como wrapEventCallback :
function wrapEventCallback(callback){
var args = Array.prototype.slice.call(arguments, 1);
return function(e){
callback.apply(this, args)
}
}
var someVar=''origin'';
func = function(v){
console.log(v);
}
document.addEventListener(''click'',wrapEventCallback(func,someVar))
someVar=''changed''
Aquí wrapEventCallback(func,var1,var2) es como:
func.bind(null, var1,var2)
Puedes enlazar todos los argumentos necesarios con ''bind'':
root.addEventListener(''click'', myPrettyHandler.bind(null, event, arg1, ... ));
De esta manera, siempre conseguirás que el event , arg1 y otras cosas pasen a myPrettyHandler .
http://passy.svbtle.com/partial-application-in-javascript-using-bind
Una forma es hacer esto con una función externa :
elem.addEventListener(''click'', (function(numCopy) {
return function() {
alert(numCopy)
};
})(num));
Este método de envolver una función anónima entre paréntesis y llamarla de inmediato se llama IIFE (expresión de función invocada de inmediato)
Puede consultar un ejemplo con dos parámetros en http://codepen.io/froucher/pen/BoWwgz .
catimg.addEventListener(''click'', (function(c, i){
return function() {
c.meows++;
i.textContent = c.name + ''/'s meows are: '' + c.meows;
}
})(cat, catmeows));
Utilizar
el.addEventListener(''click'',
function(){
// this will give you the id value
alert(this.id);
},
false);
Y si desea pasar cualquier valor personalizado a esta función anónima, entonces la forma más fácil de hacerlo es
// this will dynamically create property a property
// you can create anything like el.<your variable>
el.myvalue = "hello world";
el.addEventListener(''click'',
function(){
//this will show you the myvalue
alert(el.myvalue);
// this will give you the id value
alert(this.id);
},
false);
Funciona perfectamente en mi proyecto. Espero que esto ayude
Function.prototype.bind() es la forma de vincular una función de destino a un ámbito particular y, opcionalmente, definir this objeto dentro de la función de destino.
someObj.addEventListener("click", some_function.bind(this), false);
O para capturar algo del alcance léxico, por ejemplo, en un bucle:
someObj.addEventListener("click", some_function.bind(this, arg1, arg2), false);
Finalmente, si this parámetro no es necesario dentro de la función de destino:
someObj.addEventListener("click", some_function.bind(null, arg1, arg2), false);
someVar valor de someVar debe ser accesible solo en el contexto some_function() , no desde el oyente. Si te gusta tenerlo dentro del oyente, debes hacer algo como:
someObj.addEventListener("click",
function(){
var newVar = someVar;
some_function(someVar);
},
false);
y usa newVar en newVar lugar.
La otra forma es devolver el valor de someVar desde some_function() para usarlo más en la escucha (como una nueva var local):
var someVar = some_function(someVar);
var EV = {
ev: '''',
fn: '''',
elem: '''',
add: function () {
this.elem.addEventListener(this.ev, this.fn, false);
}
};
function cons() {
console.log(''some what'');
}
EV.ev = ''click'';
EV.fn = cons;
EV.elem = document.getElementById(''body'');
EV.add();
//If you want to add one more listener for load event then simply add this two lines of code:
EV.ev = ''load'';
EV.add();