[Javascript] 요소 자체를 매개 변수로 사용하여 addEventListener를 요소에 추가합니다.


Answers

해결책

그냥 할 el.addEventListener("click", someFunction); <- not someFunction()

그런 다음 event.target 을 사용하십시오.

function someFunction(e) {
   if(e.target) ...
}

대체 솔루션

@ JaromandaX의 솔루션이 마음에 들면, 다음과 같이 간단하게 할 수 있습니다.

el.addEventListener("click",someFunction.bind(null,el));

bind 는 함수를 반환한다는 것에 주목 하자 . 이 예제에서는이를 분명히해야합니다.

function someFunction(el) {
  // if used with bind below, the results are:
  console.log(this); // "This is it!"
  console.log(el); // the clicked element
}

a.addEventListener("click",someFunction.bind("This is it!",a));

조언

  • someFunction 은 함수 자체입니다.
  • someFunction() 은 함수가 반환하는 것입니다.

좋은 코더가되고 싶다면, 만족스럽지 않아야 합니다! . 그것이 효과가 있는지 알아내는 데 시간을 할애하는 것이 합당합니다. 이 단계가 없으면 일부 경우 숨겨진 버그가 코드에 포함되어 있는지 확인할 수 없습니다.

당신이 솔루션에서 시도한 것은 안티 패턴 인 퍼뮤 테이션에 의한 프로그래밍 입니다. 안티 패턴에 관한 위대한 wiki 기사를 읽는 것이 좋습니다.

Question

우선, 미안 제목이 최고의 하나가 아니라면, 나는 더 나은 것을 찾을 수 없습니다.

어떻게 내가 div를 사용하여 div에 대한 clickEvent와 같은 함수를 설정할 수 있으며, 동시에 div 매개 변수로 함수의 매개 변수를 설정할 수 있습니까?
예 :

HTML 파일이 있습니다.

<span id='parent'>
    <div class='child'></div>
</span>

그리고 내가 다음 코드를 가지고 JS 파일 :

var el = document.getElementById("parent").getElementsByClassName("child")[0];
el.onclick = someFuntion(this);

하지만, this paramenter가 div.child 참조하기를 div.child . Div를 클릭하면 매개 변수로 전달되어야하며 DOM 요소로 전달되어 someFuntion(element) 내부에서 사용할 수있게합니다. 다른 DOM 요소와 마찬가지로 : element#id , 예를 들면.

시도한 솔루션 :

el.addEventListener("click", someFuntion(event), false);
el.addEventListener("click", someFuntion(this), false);
el.addEventListener("click", someFuntion(el), false);
$("#parent #child").bind("click", someFuntion(this));
el.onclick = someFuntion(divIntoSpan);

해결책:
el.onclick = someFuntion;

function someFunction(e){
    if(e.target){
        //remember to use "e.target" from here on, instead of only "e"
        //e.id (error: undefined); e.target.id (correct)
    }
}



만약에, 당신이 원하는대로 그것을해야만한다면

el.addEventListener('click', function(e) { 
    someFunction(e.target);
}, false);

얀 투로 난 (Jan Turoň)의 답변이 선호됩니다