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

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

---

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

클릭 된 하위 요소를 가져 오기 위해 ( event매개 변수 와 함께 사용해야합니다 .

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

요소 자체를 전달하려면 (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"로 언급했던 전체 객체를 포함합니다.

Now if you dynamically trigger doSomething() from somewhere in your code, you will notice that event is undefined. This is because it wasn't triggered from an event of clicking. So if you still want to artificially trigger the event, simply use dispatchEvent:

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

Then doSomething() will see event and event.target as per usual!

No need to pass this everywhere, and you can keep your function signatures free from wiring information and simplify things.

참고URL : https://stackoverflow.com/questions/16404327/how-to-pass-event-as-argument-to-an-inline-event-handler-in-javascript