Làm thế nào để truyền đối số cho hàm listener addEventListener?

Tình hình có phần giống-

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

Vấn đề là giá trị của someVarkhông thể nhìn thấy bên trong hàm nghe của addEventListener, trong đó nó có thể được coi là một biến mới.

Hoàn toàn không có gì sai với mã bạn đã viết. Cả hai some_functionvà someVarnên có thể truy cập được, trong trường hợp chúng có sẵn trong bối cảnh ẩn danh

function() { some_function(someVar); } 

đã được tạo ra.

Kiểm tra xem cảnh báo có cung cấp cho bạn giá trị mà bạn đang tìm kiếm hay không, hãy chắc chắn rằng nó sẽ có thể truy cập được trong phạm vi chức năng ẩn danh (trừ khi bạn có thêm mã hoạt động trên cùng một someVarbiến bên cạnh lệnh gọi addEventListener)

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

Tại sao không chỉ lấy các đối số từ thuộc tính đích của sự kiện?

Thí dụ:

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 là một ngôn ngữ hướng nguyên mẫu, hãy nhớ!

Câu hỏi này đã cũ nhưng tôi nghĩ tôi sẽ cung cấp một giải pháp thay thế bằng cách sử dụng .bind () của ES5 cho hậu thế. :)

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

Chỉ cần lưu ý rằng bạn cần thiết lập chức năng trình nghe của mình với tham số đầu tiên là đối số bạn đang chuyển sang liên kết (chức năng khác của bạn) và tham số thứ hai bây giờ là sự kiện (thay vì đầu tiên, như đã từng) .

Bạn chỉ có thể liên kết tất cả các đối số cần thiết với 'bind':

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

Bằng cách này bạn sẽ luôn luôn nhận được event, arg1, và các công cụ khác để thông qua myPrettyHandler.

http://passy.svbussy.com/partial-application-in-javascript-USE-bind

Câu hỏi khá và cũ nhưng tôi đã có cùng một vấn đề ngày hôm nay. Giải pháp sạch nhất tôi tìm thấy là sử dụng khái niệm cà ri.

Mã cho điều đó:

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

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

Bằng cách đặt tên hàm curried, nó cho phép bạn gọi Object.removeEventListener để hủy đăng ký eventListener sau một thời gian thực hiện.

Bạn có thể thêm và xóa các danh sách sự kiện bằng các đối số bằng cách khai báo một hàm là một biến.

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

newSrclà phương thức với myaudio là tham số funcNamelà biến tên hàm

Bạn có thể loại bỏ người nghe bằng myaudio.removeEventListener('ended',func,false);

Bạn có thể vượt qua somevar theo giá trị (không phải bằng tham chiếu) thông qua tính năng javascript được gọi là bao đóng :

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

Hoặc bạn có thể viết một hàm bọc phổ biến như 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'

Đây wrapEventCallback(func,var1,var2)là như:

func.bind(null, var1,var2)

someVargiá trị chỉ có thể được truy cập trong some_function()ngữ cảnh, không phải từ người nghe. Nếu bạn muốn có nó trong trình nghe, bạn phải làm một cái gì đó như:

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

và sử dụng newVarthay thế.

Một cách khác là trả về someVargiá trị từ some_function()việc sử dụng nó thêm trong trình nghe (dưới dạng var cục bộ mới):

var someVar = some_function(someVar);

Đây là một cách khác (Cách này hoạt động bên trong các vòng lặp):

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

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

false);

Function.prototype.bind () là cách để liên kết một hàm mục tiêu với một phạm vi cụ thể và tùy ý xác định thisđối tượng trong hàm mục tiêu.

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

Hoặc để nắm bắt một số phạm vi từ vựng, ví dụ như trong một vòng lặp:

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

Cuối cùng, nếu thistham số không cần thiết trong hàm mục tiêu:

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

Sử dụng

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

Và nếu bạn muốn chuyển bất kỳ giá trị tùy chỉnh nào vào hàm ẩn danh này thì cách dễ nhất để làm điều đó là

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

Hoạt động hoàn hảo trong dự án của tôi. Hy vọng điều này sẽ giúp

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

Đây là cách tôi có sự kiện thông qua đúng.

Gửi các đối số đến hàm gọi lại của eventListener yêu cầu tạo một hàm bị cô lập và chuyển các đối số đến hàm bị cô lập đó.

Đây là một chức năng trợ giúp nhỏ đẹp mà bạn có thể sử dụng. Dựa trên ví dụ "xin chào thế giới" ở trên.)

Một điều cũng cần thiết là duy trì một tham chiếu đến chức năng để chúng ta có thể loại bỏ người nghe một cách sạch 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);

Một cách là làm điều này với một chức năng bên ngoài :

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

Phương pháp gói hàm ẩn danh này trong ngoặc đơn và gọi nó ngay lập tức được gọi là IIFE (Biểu thức hàm được gọi ngay lập tức)

Bạn có thể kiểm tra một ví dụ với hai tham số trong 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));

Nếu tôi không nhầm sử dụng cách gọi hàm với bindthực sự tạo ra một hàm mới được bindphương thức trả về . Điều này sẽ gây ra sự cố cho bạn sau này hoặc nếu bạn muốn xóa trình lắng nghe sự kiện, vì về cơ bản nó giống như một chức năng ẩn danh:

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

Vì vậy, hãy ghi nhớ điều đó.

Nếu bạn đang sử dụng ES6, bạn có thể làm tương tự như được đề xuất nhưng sạch hơn một chút:

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

thay thế một dòng tốt đẹp

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

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

 //some action...

}

Cũng thử những thứ này (IE8 + Chrome. Tôi không biết về 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

Hy vọng không có lỗi chính tả :-)

Tôi đã bị mắc kẹt trong điều này khi tôi đang sử dụng nó trong một vòng lặp để tìm các yếu tố và thêm người nghe vào nó. Nếu bạn đang sử dụng nó trong một vòng lặp, thì điều này sẽ hoạt động hoàn hảo

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

Năm 2019, rất nhiều thay đổi api, câu trả lời tốt nhất không còn hoạt động, không sửa lỗi.

chia sẻ một số mã làm việc.

Lấy cảm hứng từ tất cả các câu trả lời trên.

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

Có một biến đặc biệt bên trong tất cả các hàm: đối số . Bạn có thể truyền tham số của mình dưới dạng tham số ẩn danh và truy cập chúng (theo thứ tự) thông qua biến đối số.

Thí dụ:

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

Cách tiếp cận sau đây làm việc tốt cho tôi. Sửa đổi từ đây .

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>

Câu trả lời sau đây là đúng nhưng đoạn mã dưới đây không hoạt động trong IE8 nếu giả sử bạn nén tệp js bằng yuicompressor. (Trên thực tế, vẫn còn hầu hết người dân Hoa Kỳ sử dụng IE8)

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

Vì vậy, chúng tôi có thể khắc phục sự cố ở trên như sau và nó hoạt động tốt trong tất cả các trình duyệt

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

Hy vọng, nó sẽ hữu ích cho một số người đang nén tệp js trong môi trường sản xuất.

Chúc may mắn!!

Đoạn mã sau hoạt động tốt với tôi (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);
}

Đầu ra:

0
1
2

Bạn cần:

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

Có lẽ không tối ưu, nhưng đủ đơn giản cho những người không siêu hiểu biết js. Đặt hàm gọi addEventListener vào hàm riêng của nó. Bằng cách đó, bất kỳ giá trị hàm nào được truyền vào nó đều duy trì phạm vi riêng của chúng và bạn có thể lặp lại hàm đó nhiều như bạn muốn.

Ví dụ tôi đã làm việc với việc đọc tệp khi tôi cần để chụp và hiển thị bản xem trước của hình ảnh và tên tệp. Tôi đã mất một lúc để tránh các vấn đề không đồng bộ khi sử dụng loại tải lên nhiều tệp. Tôi sẽ vô tình nhìn thấy cùng một 'tên' trên tất cả các kết xuất mặc dù tải lên các tệp khác nhau.

Ban đầu, tất cả hàm readFile () đều nằm trong hàm readFiles (). Điều này gây ra các vấn đề phạm vi không đồng bộ.

    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

chỉ muốn thêm. nếu bất cứ ai đang thêm chức năng cập nhật các hộp kiểm cho người nghe sự kiện, bạn sẽ phải sử dụng event.targetthay vì thiscập nhật các hộp kiểm.

Tôi có cách tiếp cận rất đơn giản. Điều này có thể làm việc cho những người khác vì nó đã giúp tôi. Đó là ... Khi bạn có nhiều phần tử / biến được gán cùng một hàm và bạn muốn truyền tham chiếu, giải pháp đơn giản nhất là ...

function Name()
{

this.methodName = "Value"

}

Đó là nó. Nó làm việc cho tôi. Quá đơn giản.

Thay thế khác, có lẽ không thanh lịch như việc sử dụng liên kết, nhưng nó hợp lệ cho các sự kiện trong một vòng lặp

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

Nó đã được thử nghiệm cho các tiện ích mở rộng chrome của google và có thể phải thay thế e.srcEuity bằng e.source trong các trình duyệt khác

Tôi đã tìm thấy giải pháp này bằng cách sử dụng nhận xét được đăng bởi Imatoria nhưng tôi không thể đánh dấu nó là hữu ích vì tôi không có đủ danh tiếng: D

Giải pháp này có thể tốt cho việc tìm kiếm

var some_other_function = someVar => function() {
}

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

hoặc ràng buộc valiable cũng sẽ tốt