วิธีการส่งผ่านข้อโต้แย้งไปยังฟังก์ชั่นฟัง addEventListener?

สถานการณ์ค่อนข้างเหมือน -

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

ทำไมไม่เพียงแค่รับข้อโต้แย้งจากแอตทริบิวต์เป้าหมายของเหตุการณ์

ตัวอย่าง:

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>

จาวาสคริปต์เป็นภาษาต้นแบบเชิงโปรดจำไว้!

คำถามนี้เก่า แต่ฉันคิดว่าฉันเสนอทางเลือกโดยใช้. ผูก () ของ ES5 - สำหรับลูกหลาน :)

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

เพิ่งทราบว่าคุณจำเป็นต้องตั้งค่าฟังก์ชั่นผู้ฟังของคุณด้วย param แรกเป็นอาร์กิวเมนต์ที่คุณส่งผ่านไปยัง bind (ฟังก์ชั่นอื่น ๆ ของคุณ) และ param ที่สองคือเหตุการณ์ (แทนที่จะเป็นอันแรก) .

คุณสามารถผูกอาร์กิวเมนต์ที่จำเป็นทั้งหมดด้วย 'ผูก':

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

ด้วยวิธีนี้คุณก็จะได้รับevent, arg1และสิ่งอื่น ๆ myPrettyHandlerส่งผ่านไปยัง

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

คำถามค่อนข้างเก่า แต่ฉันมีปัญหาเดียวกันในวันนี้ วิธีแก้ปัญหาที่สะอาดที่สุดที่ฉันพบคือใช้แนวคิดของแกง

รหัสสำหรับสิ่งนั้น:

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

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

โดยการตั้งชื่อฟังก์ชั่น curried จะช่วยให้คุณสามารถเรียก Object.removeEventListener เพื่อยกเลิกการลงทะเบียน eventListener ในเวลาดำเนินการในภายหลัง

คุณสามารถเพิ่มและลบ eventlisteners ด้วยข้อโต้แย้งโดยประกาศฟังก์ชั่นเป็นตัวแปร

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

newSrc เป็นวิธีการที่มี myaudio เป็นพารามิเตอร์ funcNameเป็นตัวแปรชื่อฟังก์ชั่น

คุณสามารถลบผู้ฟังด้วย myaudio.removeEventListener('ended',func,false);

คุณสามารถผ่าน somevar ตามค่า (ไม่ใช่โดยการอ้างอิง) ผ่านคุณสมบัติ javascript ที่รู้จักในชื่อการปิด :

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

หรือคุณสามารถเขียนฟังก์ชัน wrap ทั่วไปเช่น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()เพื่อใช้เพิ่มเติมใน listener (เป็น var ภายในเครื่องใหม่):

var someVar = some_function(someVar);

นี่เป็นอีกวิธีหนึ่ง (อันนี้ใช้ได้ภายในลูป):

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

ทำงานได้อย่างสมบูรณ์แบบในโครงการของฉัน หวังว่าจะช่วยได้

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

นี่คือวิธีที่ฉันได้รับเหตุการณ์ผ่านอย่างถูกต้อง

การส่งอาร์กิวเมนต์ไปยังฟังก์ชันการเรียกกลับของ eventListener ต้องสร้างฟังก์ชันแยกและส่งผ่านอาร์กิวเมนต์ไปยังฟังก์ชันที่แยกได้

นี่คือฟังก์ชั่นตัวช่วยเล็ก ๆ ที่คุณสามารถใช้ได้ ตามตัวอย่าง "สวัสดีโลก" ด้านบน)

สิ่งหนึ่งที่จำเป็นต้องมีก็คือการรักษาการอ้างอิงถึงฟังก์ชั่นเพื่อให้เราสามารถลบผู้ฟังได้อย่างหมดจด

// 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เมธอด สิ่งนี้จะทำให้คุณเกิดปัญหาในภายหลังหรือหากคุณต้องการลบ listener เหตุการณ์เนื่องจากเป็นฟังก์ชันที่ไม่ระบุชื่อ:

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

ทางเลือกที่ดีหนึ่งบรรทัด

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

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

 //some action...

}

ลองใช้สิ่งเหล่านี้ (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;)
   }

มีตัวแปรพิเศษภายในการทำงานทั้งหมดคือข้อโต้แย้ง คุณสามารถส่งพารามิเตอร์ของคุณเป็นพารามิเตอร์ที่ไม่ระบุชื่อและเข้าถึงพวกเขา (ตามลำดับ) ผ่านตัวแปรอาร์กิวเมนต์

ตัวอย่าง:

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>

คำตอบต่อไปนี้ถูกต้อง แต่รหัสด้านล่างไม่ทำงานใน 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 ในสภาพแวดล้อมการผลิต

โชคดี!!

รหัสต่อไปนี้ทำงานได้ดีสำหรับฉัน (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);
    }
});

อาจไม่ดีที่สุด แต่ก็ง่ายพอสำหรับผู้ที่ไม่เข้าใจ super 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"

}

แค่นั้นแหละ. มันใช้งานได้สำหรับฉัน ง่ายมาก

ทางเลือกอื่น ๆ อาจไม่สวยงามเท่าการใช้งานการผูก แต่ใช้ได้กับเหตุการณ์ในลูป

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

วิธีนี้อาจดูดี

var some_other_function = someVar => function() {
}

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

หรือผูกของมีค่าก็จะดีเช่นกัน