JavaScript 클릭 처리기에서 클릭된 요소의 ID를 가져오는 방법

반응형

우리는 가끔 자바스크립트 클릭 이벤트 핸들러에서 클릭한 요소의 ID를 받고 싶습니다.

이 문서에서는 JavaScript 클릭 핸들러에서 클릭된 요소의 ID를 가져오는 방법에 대해 설명합니다.

각 요소의 onclick 속성을 동일한 이벤트 처리기 기능으로 설정

요소를 클릭할 때 요소의 ID를 얻을 수 있는 한 가지 방법은 각 요소 객체의 onclick 속성을 동일한 클릭 이벤트 핸들러 함수로 설정하는 것입니다.

 

예를 들어 다음과 같은 HTML을 작성할 수 있습니다.

<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

그런 다음 다음 JavaScript 코드를 작성하여 각 요소의 이벤트 핸들러를 동일한 클릭 이벤트 핸들러로 설정할 수 있습니다.

const onClick = function() {
    console.log(this.id, this.innerHTML);
}
document.getElementById('1').onclick = onClick;
document.getElementById('2').onclick = onClick;
document.getElementById('3').onclick = onClick;

onClick 기능은 각 버튼의 클릭에 대한 이벤트 핸들러입니다.

 

이것이 우리가 클릭한 요소입니다.

클릭된 요소의 ID를 얻기 위해 ID 속성을 가져올 수 있습니다.

그리고 안쪽HTML에는 버튼의 내용이 있습니다.

그런 다음 onClick 함수를 각 버튼 요소에 on Click 속성 값으로 할당합니다.

따라서 버튼 1을 클릭하면 다음과 같은 결과가 나타납니다.

 

'1' 'Button 1'

움직임이 둔해진, <재목·배 등이> 물에 젖어 무거워진

버튼 2를 클릭하면 다음과 같은 내용이 표시됩니다.

'2' 'Button 2'

3번 버튼을 클릭하면 다음과 같은 화면이 나옵니다.

 

'3' 'Button 3'

움직임이 둔해진, <재목·배 등이> 물에 젖어 무거워진

이벤트 개체에서 클릭한 요소 가져오기

이벤트 핸들러에서 클릭한 요소를 가져오는 또 다른 방법은 이벤트 핸들러 함수의 첫 번째 매개 변수인 이벤트 개체에서 가져오는 것입니다.

예를 들어 다음과 같은 HTML을 작성할 수 있습니다.

 

<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

그리고 다음과 같은 자바스크립트 코드:

const onClick = (event) => {
    console.log(event.srcElement.id);
}
window.addEventListener('click', onClick);

클릭 이벤트 수신기를 html 요소에 부착하기 위해 window.addEventListener를 호출합니다.

그런 다음 event.srcElement 속성에서 클릭한 요소를 가져옵니다.

 

그리고 우리는 id 속성으로 그 요소의 ID를 얻을 수 있습니다.

event.srcElement를 event.target:로 대체할 수 있습니다.

const onClick = (event) => {
    console.log(event.target.id);
}
window.addEventListener('click', onClick);

같은 결과를 얻었죠

우리가 클릭한 요소가 nodeName 속성이 있는 버튼인지도 확인할 수 있습니다.

 

예를 들어, 우리는 다음과 같이 쓸 수 있다.

const onClick = (event) => {
    if (event.target.nodeName === 'BUTTON') {
          console.log(event.target.id);
    }
}
window.addEventListener('click', onClick);

console.log 메서드를 실행하기 전에 event.target.nodeName이 BUTTON인지 확인할 if 문을 추가합니다.

이렇게 하면 버튼을 클릭했을 때만 클릭 핸들러 코드를 실행합니다.

결론

 

클릭 이벤트 핸들러에서 클릭된 요소의 ID를 얻을 수 있습니다.

우리는 정규 함수를 사용하면 이 값을 얻을 수 있습니다.

또는 클릭 이벤트 핸들러의 이벤트 객체에서 동일한 값을 얻을 수 있습니다.