JavaScript의 이벤트 대상

Muhammad Muzammil Hussain 2022년7월12일

JavaScript JavaScript Event

이 기사에서는 JavaScript 소스 코드의 event.target 속성과 JavaScript 웹 페이지에서 해당 속성의 이점에 대해 알아봅니다.

JavaScript의 이벤트 대상

event.target 속성은 이벤트를 트리거하는 데 사용되는 HTML 요소의 이름을 찾는 데 도움이 됩니다. 예를 들어 HTML 요소 클릭 이벤트에서 함수를 호출하면 트리거하고 함수를 호출할 지정된 요소 이름을 결정할 수 있습니다.

해당 속성을 가져오기 위해 event.target을 호출하고 let variable = event.target과 같은 변수에 저장합니다. 이제 해당 변수로 여러 event.target 속성을 얻을 수 있습니다.

이벤트가 발생한 개체에 대한 참조를 반환합니다. 이벤트의 target 속성을 사용하여 다음 작업을 수행할 수 있습니다.

이벤트를 발생시키는 element를 얻을 수 있습니다.
element 속성에 액세스할 수 있습니다.
요소의 일부 속성을 쉽게 수정할 수 있습니다.

최신 웹 브라우저는 이 target 이벤트 속성을 완벽하게 지원합니다.

기본 구문:

var property = event.target;
var elementName = property.tagName

다음 예제에서는 event.target 객체와 tagName 속성을 함께 사용하여 클릭 시 이벤트를 트리거하고 선언된 함수를 호출하는 데 사용되는 요소 이름을 결정합니다.

예시:

<!DOCTYPE html>
<html>
   <body onclick="myFunction(event)">
      <h1 style="color:blueviolet">DelftStack Learning</h1>
      <h3>JavaScript Target event property</h3>
      <p>Click on button on this web page in this document to find out the element name which is used to triggered the event.</p>
      <button>Click here</button>
      <p id="myPara"></p>
      <script>
         function myFunction(event) {
             var myVariable = event.target; // get tagert event property
             document.getElementById("myPara").innerHTML = "Event triggered by a " + myVariable.tagName + " element";
         }
      </script>
   </body>
</html>

위의 HTML 웹 페이지 소스에서 HTML 요소 버튼을 사용하여 이벤트를 트리거하고 myFunction을 호출했습니다. 해당 함수에서 이벤트를 인수로 가져와 myVariable 변수를 사용하고 이벤트를 사용하여 속성을 저장해야 합니다.

그런 다음 기본 document.getElementById('myPara').innerHTML을 사용하여 문자열 텍스트를 단락 요소에 할당했습니다. 우리는 이미 본문에 단락 요소를 생성하고 id myPara를 할당했습니다.

단락에 요소 이름을 표시하기 위해 태그 이름을 myVariable.tagName과 연결했습니다. 위의 소스를 HTML 확장에 저장하고 브라우저에서 열어 결과를 볼 수 있습니다.

JavaScript의 이벤트 대상

관련 문장 - JavaScript Event