[javascript] JavaScript의 인라인 이벤트 처리기에 이벤트를 인수로 전달하는 방법은 무엇입니까?

Program / 글쓴이 
// this e works
document.getElementById("p").oncontextmenu = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
};

// this e is undefined
function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}
<p id="p" onclick="doSomething(e)">
    <a href="#">foo</a>
    <span>bar</span>
</p>

비슷한 질문이 몇 가지 있습니다.

하지만 내 코드에서, 내가 좋아하는, 클릭 됐어요 자식 요소 얻으려고 a또는span .

그렇다면 event이벤트 핸들러에 인수 로 전달하는 올바른 방법은 무엇 입니까? 아니면 인수를 전달하지 않고 핸들러 내부에 이벤트를 가져 오는 방법은 무엇입니까?

편집하다

addEventListener및 jQuery을 (를) 알고 inline있습니다. 이벤트를 이벤트 처리자 에게 전달하기위한 솔루션을 제공하십시오 .

답변

event객체 를 전달하려면 :

<p id="p" onclick="doSomething(event)">

클릭 된 자식을 가져 오기 위해 element( event매개 변수 와 함께 사용해야합니다 .

function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

element자체 전달 (DOMElement) :

<p id="p" onclick="doThing(this)">

jsFiddle에서 라이브 예제보기

답변

인라인 이벤트는 함수로 실행되므로 단순히 인수 를 사용할 수 있습니다 .

<p id="p" onclick="doSomething.apply(this, arguments)">

과 

function doSomething(e) {
  if (!e) e = window.event;
  // 'e' is the event.
  // 'this' is the P element
}

허용되는 답변에 언급 된 ‘이벤트’는 실제로 함수에 전달 된 인수의 이름입니다. 글로벌 이벤트와는 아무 관련이 없습니다.

답변

통과 할 필요가 없습니다. this이미event 기본적으로 자동으로 전달 된 객체 있으며 event.target여기에는 해당 객체가있는 객체가 포함 됩니다. 구문을 가볍게 할 수 있습니다.

이:

<p onclick="doSomething()">

이것으로 작동합니다 : 

function doSomething(){
  console.log(event);
  console.log(event.target);
}

인스턴스화 할 필요가 없습니다. event개체 이미 존재합니다. 그것을 시도하십시오. 그리고 event.target이전에 “this”라고 언급했던 전체 객체를 포함합니다.

이제 코드 어딘가에서 동적으로 doSomething ()을 트리거하면 event정의되지 않은 것을 알 수 있습니다. 클릭 이벤트에서 트리거되지 않았기 때문입니다. 따라서 이벤트를 인위적으로 트리거하려면 dispatchEvent다음을 사용하십시오 .

document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));

그럼 doSomething()볼 것이다event 과 event.target평소에 따라!

this모든 곳 을 통과 할 필요가 없으며 기능 시그니처에 배선 정보가 없도록 유지하고 작업을 단순화 할 수 있습니다.

답변