帶參數的Javascript事件處理程序


Answers

您可以嘗試使用bind方法,我認為這可以實現您的要求。 如果沒有別的,它仍然非常有用。

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

我想創建一個傳遞事件和一些參數的eventHandler。 問題是函數沒有得到元素。 這是一個例子:

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'必須在匿名函數之外定義。 如何在匿名函數中獲取傳遞的元素? 有沒有辦法做到這一點?

那麼addEventListener呢? 我似乎無法通過addEventListener傳遞事件嗎?

更新

我好像用“這個”修復了這個問題

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

其中包含我可以在函數中訪問的this.element。

addEventListener

但我想知道addEventListener:

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



這是一個古老的問題,但卻很常見。 所以讓我在這裡添加這個。

使用ES2015語法,您可以更簡潔地實現它:

function event_handler(event, arg) {
  console.log(event, arg);
}

element.addEventListener('click', (event) => event_handler(event, 'Here comes the argument'));



let obj = MyObject();

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

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



Links