매개 변수가있는 자바 스크립트 이벤트 핸들러

매개 변수가있는 자바 스크립트 이벤트 핸들러

---

이벤트와 일부 매개 변수를 전달하는 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를 통해 이벤트를 전달할 수없는 것 같습니다.

최신 정보

나는 'this'로 문제를 해결하는 것 같았다

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

---

코드가 무엇을 하려는지 정확히 이해하지 못하지만 함수 클로저의 장점을 사용하여 모든 이벤트 처리기에서 변수를 사용할 수 있도록 만들 수 있습니다.

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

정확한 코딩 상황에 따라 거의 항상 일종의 클로저로 변수에 대한 액세스 권한을 유지할 수 있습니다.

귀하의 의견에서 달성하려는 것이 다음과 같은 경우 :

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

그런 다음 실제 이벤트 처리기 함수를 실행하고 반환 할 때 클로저에서 원하는 인수를 캡처하는 자체 실행 함수 (IIFE)를 사용하여이를 수행 할 수 있습니다.

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

IIFE 작동 방식에 대한 자세한 내용은 다음 다른 참조를 참조하십시오.

익명 함수 내부의 자바 스크립트 래핑 코드

JavaScript의 IIFE (Immediately-Invoked Function Expression)-jQuery 전달

익명 함수를 자체 실행하는 JavaScript의 좋은 사용 사례는 무엇입니까?

이 마지막 버전은 다음과 같은 작업을 수행하는 것이 더 쉽습니다.

// 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()콜백에 인수를 추가하는 데 사용할 수도 있습니다 . 전달하는 모든 인수 .bind()는 콜백 자체가 가질 인수 앞에 추가됩니다. 따라서 다음과 같이 할 수 있습니다.

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

---

오래된 질문이지만 일반적인 질문입니다. 여기에 이것을 추가하겠습니다.

화살표 함수 구문 을 사용하면 어휘 적으로 바인딩되고 연결될 수 있기 때문에보다 간결한 방식으로 달성 할 수 있습니다.

화살표 함수 표현식은 this, arguments, super 또는 new.target 키워드에 대한 자체 바인딩이 없지만 정규 함수 표현식에 대한 구문 적으로 압축 된 대안입니다.

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

이벤트 리스너를 정리해야하는 경우 :

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

다음은 미친 한 줄입니다.

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

보다 유순 한 버전 : 모든 정상적인 작업에 더 적합합니다.

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

---

Something you can try is using the bind method, I think this achieves what you were asking for. If nothing else, it's still very useful.

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

---

Given the update to the original question, it seems like there is trouble with the context ("this") while passing event handlers. The basics are explained e.g. here http://www.w3schools.com/js/js_function_invocation.asp

A simple working version of your example could read

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

See also Javascript call() & apply() vs bind()?

---

Short answer:

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

... 

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

---

this inside of doThings is the window object. Try this instead:

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.

참고URL : https://stackoverflow.com/questions/10000083/javascript-event-handler-with-parameters