如何通过参addEventListener听众的功能？

https://stackoverflow.com/questions/256754

05-07-2019
|

题

这种情况是有点像

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

问题是，价值 someVar 是不可见的内的听众的功能 addEventListener, ，在那里它可能是被视为一个新的变量。

解决方案

您编写的代码绝对没有错。 some_function 和 someVar 都应该是可访问的，以防它们在匿名的上下文中可用

function() { some_function(someVar); }

已创建。

检查警报是否为您提供了您一直在寻找的值，确保它可以在匿名函数的范围内访问（除非您有更多的代码在相同的 someVar 变量上运行在 addEventListener ）

的调用旁边

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

其他提示

为什么不从事件的target属性中获取参数？

示例：

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是一种面向原型的语言，请记住！

这个问题已经很久了，但我认为我会为使用ES5的.bind（）提供替代方案。：）

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

请注意，你需要设置你的侦听器函数，第一个param作为你传递给bind的参数（你的另一个函数），第二个参数现在是事件（而不是第一个，因为它会已经）。

您可以通过将函数声明为变量来添加和删除带参数的eventlistener。

<代码> myaudio.addEventListener（ '结束'，=了funcName函数（）{newSrc（myaudio）}，假）;

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

您可以删除侦听器 <代码> myaudio.removeEventListener（ '结束'，FUNC，FALSE）;

相当古老的问题，但今天我遇到了同样的问题。我发现最干净的解决方案是使用 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, ... ));

通过这种方式，您将始终获得事件， arg1 ，以及传递给 myPrettyHandler 的其他内容。

http://passy.svbtle.com/partial-application-在-JavaScript的使用绑定

你可以通过一个名为关闭：

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 。

另一种方法是从 some_function（）返回 someVar 值，以便在侦听器中进一步使用它（作为一个新的本地var）：

var someVar = some_function(someVar);

这是另一种方式（这个方法适用于循环）：

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

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

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

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

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

还试试这些（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

希望没有拼写错误： - ）

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

当我在循环中使用它来查找元素并向其添加列表器时，我陷入了困境。如果你在循环中使用它，那么这将完美地工作

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

如果我错误地使用调用函数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));

    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>

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

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

以下的答案是正确的但是下面的代码不是工作在IE8如果假设你压缩js文件使用yuicompressor.(实际上仍然多数美国人民使用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文件在生产环境。

祝你好运!!

所有函数中都有一个特殊变量： arguments 。您可以将参数作为匿名参数传递，并通过参数变量访问它们（按顺序）。

示例：

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

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

此解决方案可能适合寻找

var some_other_function = someVar => function() {
}

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

或绑定变量也会很好

很好的一线替代

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

function onDragStart(param1, param2, param3, evt) {

 //some action...

}

可能不是最佳的，但对于那些不是超级精明的人来说足够简单。将调用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

其他替代方案，可能不如使用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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow