Parametreli Javascript olay işleyicisi

Olayı ve bazı parametreleri geçiren bir eventHandler yapmak istiyorum. Sorun, işlevin öğeyi almamasıdır. İşte bir örnek:

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

'Elem' anonim işlevin dışında tanımlanmalıdır. Anonim işlev içinde kullanılmak üzere iletilen öğeyi nasıl edinebilirim? Bunu yapmanın bir yolu var mı?

Peki addEventListener ne olacak? Olayı addEventListener aracılığıyla hiç geçiremiyorum, değil mi?

Güncelleme

Sorunu "bu" ile çözmüş gibiydim

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

Bu öğenin bulunduğu yer, işlevde erişebileceğim.

AddEventListener

Ama addEventListener'ı merak ediyorum:

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}

Kodunuzun tam olarak ne yapmaya çalıştığını anlamıyorum, ancak işlev kapanışlarının avantajlarını kullanarak değişkenleri herhangi bir olay işleyicisinde kullanılabilir hale getirebilirsiniz:

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

Kesin kodlama durumunuza bağlı olarak, değişkenlere erişimi korumak için hemen hemen her zaman bir çeşit kapatma yapabilirsiniz.

Yorumlarınıza göre, başarmaya çalıştığınız şey şuysa:

element.addEventListener('click', func(event, this.elements[i]))

Ardından, bunu gerçek olay işleyici işlevini çalıştırırken ve döndürürken bir kapanışta istediğiniz bağımsız değişkenleri yakalayan kendi kendine çalışan bir işlevle (IIFE) yapabilirsiniz:

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

Bir IIFE'nin nasıl çalıştığı hakkında daha fazla bilgi için şu diğer referanslara bakın:

Anonim işlevin içine kod sarma

JavaScript'te Hemen Çağrılan Fonksiyon İfadesi (IIFE) - jQuery'yi Geçirme

Anonim işlevleri kendi kendine çalıştıran JavaScript'in iyi kullanım örnekleri nelerdir?

Bu son sürüm, bunun ne yaptığını görmek belki daha kolay:

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

.bind()Geri aramaya argümanlar eklemek de mümkündür . .bind()İlettiğiniz herhangi bir bağımsız değişken, geri aramanın kendisinin sahip olacağı bağımsız değişkenlerin başına eklenecektir. Yani bunu yapabilirsin:

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

Bu eski bir sorudur ama ortak bir sorudur. Öyleyse bunu buraya eklememe izin verin.

İle ok fonksiyonu sözdizimi , sözcüksel olarak bağlandığı ve zincirlenebildiği için bunu daha kısa ve öz bir şekilde elde edebilirsiniz.

Ok işlevi ifadesi, normal işlev ifadesine sözdizimsel olarak kompakt bir alternatiftir, ancak buna, argümanlara, süper veya new.target anahtar kelimelerine kendi bağları yoktur.

const event_handler = (event, arg) => console.log(event, arg);
el.addEventListener('click', (event) => event_handler(event, 'An argument'));

Olay dinleyicisini temizlemeniz gerekiyorsa:

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

İşte çılgın tek satırlık:

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

Daha uysal versiyon : Herhangi bir aklı başında çalışma için daha uygun.

el.addEventListener('click', (event) => ((arg) => {
  console.log(event, arg);
})('An argument'));

Deneyebileceğiniz bir şey bağlama yöntemini kullanmaktır, bence bu, istediğiniz şeyi başarır. Hiçbir şey yoksa, yine de çok kullanışlıdır.

function doClick(elem, func) {
  var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument
  diffElem.addEventListener('click', func.bind(diffElem, elem))
}

function clickEvent(elem, evt) {
  console.log(this);
  console.log(elem); 
  // 'this' and elem can be the same thing if the first parameter 
  // of the bind method is the element the event is being attached to from the argument passed to doClick
  console.log(evt);
}

var elem = document.getElementById('elem_to_do_stuff_with');
doClick(elem, clickEvent);

Orijinal soruya yapılan güncelleme göz önüne alındığında, olay işleyicileri geçerken bağlamla ilgili ("bu") sorun var gibi görünüyor. Temel bilgiler, örneğin burada açıklanmıştır http://www.w3schools.com/js/js_function_invocation.asp

Örneğinizin basit bir çalışma versiyonu okuyabilir

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

Ayrıca bkz. Javascript call () & apply () vs bind ()?

Kısa cevap:

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
} 

thisiçinde doThingspencere nesnesidir. Bunun yerine şunu deneyin:

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};

let obj = MyObject();

elem.someEvent( function(){ obj.func(param) } );

//calls the MyObject.func, passing the param.