Javascript - div에 클릭 이벤트(onclick) 설정 방법

div 클릭 시, onclick 이벤트를 받아서 특정 동작을 처리하는 방법에 대해서 알아보겠습니다.

1. HTML에서 onclick 함수 설정

이 방법은 HTML에서 div가 클릭되었을 때 호출할 Javascript의 함수를 입력하는 방법입니다.

HTML

아래와 같이 div의 onclick에 함수를 입력하면, div가 클릭될 때 함수가 실행됩니다.

<div id="my-div" onclick="divClicked()">Click</div>

Javascript

아래와 같이 onclick에 입력한 함수를 구현하였고, div가 클릭될 때 이 함수가 실행됩니다.

function divClicked() {
  alert("Div was clicked!");
}

Output:

2. addEventListener()으로 클릭 이벤트 받기

이 방법은 HTML에서 Javascript의 함수를 입력하지 않고, Javascript에서 div를 찾아서 클릭 이벤트를 등록하는 방법입니다.

HTML

아래와 같이 div에는 onclick이 설정되어있지 않습니다.

<div id="my-div">Click</div>

Javascript

DOM이 로드되면, my-div 요소를 찾고 클릭 이벤트 리스너를 설정합니다. 클릭 이벤트가 발생하면 alert가 발생되도록 구현하였습니다.

• addEventListener('DOMContentLoaded', function() {...} : DOM이 loaded될 때 함수가 호출됨
• element.addEventListener('click', function() {...} : element에 클릭 이벤트 리스너를 추가

document.addEventListener('DOMContentLoaded', function() {
  const divElement = document.getElementById('my-div');

  divElement.addEventListener('click', function() {
    alert('Div was clicked!');
  });
});

참고로, divElement.addEventListener() 대신에 onclick 값에 함수를 입력하여 클릭 이벤트를 받을 수 있습니다.

divElement.onclick = function() {
  alert('Div was clicked!');
};

Output: