如何将参数传递给addEventListener侦听器函数?

2020/10/03 00:01 · javascript ·  · 0评论

情况有点像-

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

问题在于,的值someVar在的侦听器函数中不可见,在该函数addEventListener中它可能被视为新变量。

您编写的代码绝对没有错。双方some_functionsomeVar应访问的,以防他们在上下文中可用的匿名

function() { some_function(someVar); } 

已创建。

检查警报是否为您提供了您一直在寻找的值,请确保它可以在匿名函数的范围内访问(除非您someVar对调用旁边有更多对相同变量进行操作的代码addEventListener

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

为什么不仅仅从事件的target属性获取参数?

例:

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';
function myFunc(evt)
{
  window.alert(evt.currentTarget.myParam);
}
<button class="input">Show parameter</button>

JavaScript是一种面向原型的语言,请记住!

这个问题很老,但我想我会提供使用ES5的替代方案.bind()-以供后代使用。:)

function some_func(otherFunc, ev) {
    // magic happens
}
someObj.addEventListener("click", some_func.bind(null, some_other_func), false);

请注意,您需要将第一个参数设置为您要传递给bind(您的其他函数)的参数的侦听器函数,而第二个参数现在是事件(而不是原来的第一个) 。

相当老的问题,但今天我有同样的问题。我发现最干净的解决方案是使用currying概念

该代码:

someObj.addEventListener('click', some_function(someVar));

var some_function = function(someVar) {
    return function curried_func(e) {
        // do something here
    }
}

通过命名curried函数,它允许您调用Object.removeEventListener以便在以后的执行时注销eventListener。

您只需将所有必要的参数与'bind'绑定:

root.addEventListener('click', myPrettyHandler.bind(null, event, arg1, ... ));

通过这种方式,你将永远得到eventarg1传递,和其他的东西myPrettyHandler

http://passy.svbtle.com/partial-application-in-javascript-using-bind

您可以通过将函数声明为变量来添加和删除带参数的事件侦听器。

myaudio.addEventListener('ended',funcName=function(){newSrc(myaudio)},false);

newSrc是以myaudio作为参数的方法
funcName是函数名称变量

您可以使用以下方法删除监听器
myaudio.removeEventListener('ended',func,false);

您可以通过称为闭包的javascript功能按值(而不是按引用)传递somevar

var someVar='origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',function(someVar){
   return function(){func(someVar)}
}(someVar));
someVar='changed'

或者,您可以编写一个通用的包装函数,例如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'

这里wrapEventCallback(func,var1,var2)是这样的:

func.bind(null, var1,var2)

someVar值只能在some_function()上下文中访问,不能从侦听器访问如果您希望将其包含在侦听器中,则必须执行以下操作:

someObj.addEventListener("click",
                         function(){
                             var newVar = someVar;
                             some_function(someVar);
                         },
                         false);

newVar改为使用

另一种方法是返回someVar值,some_function()以供在侦听器中进一步使用它(作为新的本地变量):

var someVar = some_function(someVar);

这是另一种方式(这种方式在for循环内有效):

var someVar = some_other_function();
someObj.addEventListener("click", 

function(theVar){
    return function(){some_function(theVar)};
}(someVar),

false);

Function.prototype.bind()是将目标函数绑定到特定范围并有选择地this在目标函数内定义对象的方法。

someObj.addEventListener("click", some_function.bind(this), false);

或捕获某些词汇范围,例如在循环中:

someObj.addEventListener("click", some_function.bind(this, arg1, arg2), false);

最后,如果this目标函数中不需要参数:

someObj.addEventListener("click", some_function.bind(null, arg1, arg2), false);

   el.addEventListener('click',
    function(){
        // this will give you the id value 
        alert(this.id);    
    },
false);

如果您要将任何自定义值传递给该匿名函数,那么最简单的方法是

 // 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);

在我的项目中完美运行。希望这会有所帮助

不错的一线替代

element.addEventListener('dragstart',(evt) => onDragStart(param1, param2, param3, evt));
function onDragStart(param1, param2, param3, evt) {

 //some action...

}
    $form.addEventListener('submit', save.bind(null, data, keyword, $name.value, myStemComment));
    function save(data, keyword, name, comment, event) {

这就是我正确传递事件的方式。

将参数发送到eventListener的回调函数需要创建一个隔离的函数并将参数传递给该隔离的函数。

这是您可以使用的一个不错的小助手功能。基于上面的“ hello world's示例”。)

还需要做的一件事是维护对函数的引用,以便我们可以干净地删除侦听器。

// 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);

一种方法是使用外部函数执行此操作

elem.addEventListener('click', (function(numCopy) {
  return function() {
    alert(numCopy)
  };
})(num));

这种将匿名函数包装在括号中并立即调用的方法称为IIFE(立即调用函数表达式)

您可以在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));

如果我没有记错,那么使用来调用函数bind实际上会创建一个由该bind方法返回的新函数这将在以后或您想要删除事件侦听器时给您带来问题,因为它基本上就像一个匿名函数:

// Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', myCallback);
someObject.removeEventListener('event', myCallback);

// Not Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', function() { myCallback });
someObject.removeEventListener('event', /* can't remove anonymous function */);

所以请记住这一点。

如果您使用的是ES6,则可以执行与建议的相同的操作,但更为简洁:

someObject.addEventListener('event', () => myCallback(params));

还可以尝试以下方法(IE8 + Chrome。我不知道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

希望没有错别字:-)

我陷入了困境,因为我在循环中使用它来查找元素并向其中添加列表器。如果您正在循环使用它,那么它将完美地工作

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);
     });
}

在2019年,许多api更改,最佳答案不再有效,并且没有修复错误。

共享一些工作代码。

受以上所有答案的启发。

 button_element = document.getElementById('your-button')

 button_element.setAttribute('your-parameter-name',your-parameter-value);

 button_element.addEventListener('click', your_function);


 function your_function(event)
   {
      //when click print the parameter value 
      console.log(event.currentTarget.attributes.your-parameter-name.value;)
   }

所有函数内部都有一个特殊变量:arguments您可以将参数作为匿名参数传递,并通过参数(按顺序)访问它们变量

例:

var someVar = some_other_function();
someObj.addEventListener("click", function(someVar){
    some_function(arguments[0]);
}, false);
    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();

以下方法对我来说效果很好。这里修改

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>

以下答案是正确的,但是如果假设您使用yuicompressor压缩了js文件,则以下代码在IE8中不起作用。(实际上,大多数美国人仍然使用IE8)

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click",
                         function(){
                          some_function(someVar);
                         },
                         false);

因此,我们可以按以下方式解决上述问题,并且在所有浏览器中都可以正常工作

var someVar, eventListnerFunc;
someVar = some_other_function();
eventListnerFunc = some_function(someVar);
someObj.addEventListener("click", eventListnerFunc, false);

希望对在生产环境中压缩js文件的人有用。

祝好运!!

以下代码对我来说效果很好(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);
}

输出:

0
1
2

你需要:

newElem.addEventListener('click', {
    handleEvent: function (event) {
        clickImg(parameter);
    }
});

可能不是最佳选择,但对于那些不精通js的人来说足够简单。将调用addEventListener的函数放入其自己的函数中。这样,传递给它的任何函数值都将保持其自身的作用域,并且您可以根据需要迭代该函数。

示例我需要捕获并渲染图像和文件名的预览,然后进行了文件读取。在使用多文件上传类型时,我花了一些时间来避免异步问题。即使上传了不同的文件,我也会在所有渲染器上意外看到相同的“名称”。

最初,所有readFile()函数都在readFiles()函数内。这引起了异步作用域问题。

    function readFiles(input) {
      if (input.files) {
        for(i=0;i<input.files.length;i++) {

          var filename = input.files[i].name;

          if ( /\.(jpe?g|jpg|png|gif|svg|bmp)$/i.test(filename) ) {
            readFile(input.files[i],filename);
          }
       }
      }
    } //end readFiles



    function readFile(file,filename) {
            var reader = new FileReader();

            reader.addEventListener("load", function() { alert(filename);}, false);

            reader.readAsDataURL(file);

    } //end readFile

只是想补充。如果有人添加了将复选框更新为事件侦听器的功能,则您将不得不使用event.target而不是this更新复选框。

我的方法很简单。这可能对其他人有用,因为它帮助了我。它是...当您为多个元素/变量分配了相同的功能并且要传递引用时,最简单的解决方案是...

function Name()
{

this.methodName = "Value"

}

而已。它为我工作。
很简单。

由于您的事件监听器是“点击”,因此您可以:

someObj.setAttribute("onclick", "function(parameter)");

其他替代方法,可能不如bind那样优雅,但它对于循环中的事件有效

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);
}

它已经过Google chrome扩展程序的测试,可能在其他浏览器中e.srcElement必须替换为e.source。

我使用Imatoria发布评论找到了该解决方案但由于我没有足够的声誉而无法将其标记为有用的:D

本文地址:http://javascript.askforanswer.com/ruhejiangcanshuchuandigeiaddeventlistenerzhentingqihanshu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!