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>

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

하지만 제 코드에서는 클릭된 하위 요소를 가져오려고 합니다. 예를 들어, 또는.

그렇다면 올바른 통과 방법은 무엇입니까?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의 실시간 예를 참조하십시오.

의 이름을 지정할 수 있습니다.event위와 같이, 대신 당신의 핸들러가 접근할 수 있습니다.event여기서 설명하는 매개 변수: "이벤트 핸들러가 HTML 특성으로 지정되면 지정된 코드는 다음 매개 변수를 가진 함수로 래핑됩니다."링크에 훨씬 더 많은 추가 설명서가 있습니다.

합격할 필요는 없습니다.this이미 있습니다.event기본적으로 다음을 포함하여 자동으로 전달되는 개체event.target그것은 그것이 오는 목적을 가지고 있습니다.구문을 가볍게 할 수 있습니다.

다음 항목:

<p onclick="doSomething()">

이 작업에 사용할 수 있습니다.

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

인스턴스화할 필요가 없습니다.event개체, 이미 있습니다.한번 해보세요. 그리고.event.target이전에 "이것"으로 참조했던 호출하는 전체 개체를 포함합니다.

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

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

그리고나서doSomething()보게 될 것event그리고.event.target여느 때처럼!

통과할 필요 없음this모든 곳에서 기능 서명을 배선 정보로부터 자유롭게 유지하고 작업을 단순화할 수 있습니다.

2022-10-30 업데이트:

저는 WHATWG의 누군가와 연락을 취했고, 비록 일부 IDE가 그것을 "오래된" 것으로 보고하지만, 그것이 이루어질 수 있는 다른 방법은 아래와 같습니다.당신은 당신의 발신자의 인수 목록에서 "이벤트" 키워드(자본 없음)를 어떤 위치에서든 전달하고 그렇게 사용할 수 있습니다.

아래의 a, b, c 및 d는 순서가 중요하지 않다는 것을 증명하기 위해 통과해야 하는 추가 인수입니다.

<p onclick="doSomething(a,b,event,c,d)">

함수 정의에서 다음과 같이 캡처할 수 있습니다.

function doSomething(arg1, arg2, arg3, arg4, arg5){} //arg3 would contain the event

arg3로 이벤트를 연결했기 때문에 이 경우 일반 속성에 액세스합니다.

console.log(arg3.target)

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

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

수락된 답변에 언급된 '이벤트'는 실제로 함수에 전달된 인수의 이름입니다.그것은 세계적인 행사와는 아무 상관이 없습니다.

다음은 사용자가 잘못된 문자를 복사하여 입력 텍스트 필드에 붙여넣는 것을 방지하는 방법입니다.

function validatePaste(el, e) {
  var regex = /^[a-z .'-]+$/gi;
  var key = e.clipboardData.getData('text')
  if (!regex.test(key)) {
    e.preventDefault();
    return false;
  }
}

은 이기은내있다습니 안에 .<script>태그의 이름은 다음과 같습니다.

<input type="text" onpaste="validatePaste(event)">

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