[Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법

 

<div>는 원래 사용자가 클릭할 수 없는 객체입니다.

사용자가 div를 클릭하게 하려면,

div에 onclick 이벤트를 걸어주어야 합니다.

여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다.

 

 

 

1. HTML, Javascript 사용하기

html과 Javascript를 이용하여 div에 onclick 이벤트를 추가하는 방법입니다.

<div class='my-div' onclick='hello()'>

</div>

.my-div {
  width : 150px;
  height : 150px;
  background-color : blue;
}

function hello()  {
  alert('안녕하세요');
}

  [JS]  

div 클릭시 실행될

hello() 함수를 정의하였습니다.

div가 클릭되면, '안녕하세요' 메세지를 출력하는 alert 창을 띄웁니다.

 

  [HTML]  

onclick='hello()'

div에 onclick 이벤트를 추가하였습니다.

div를 클릭하면 onclick 이벤트에 지정된 hello() 함수를 호출하고,

'안녕하세요'라는 메세지를 출력하는 alert 창이 뜹니다.

 

 

 

2. Javascript만 사용하기

Javascript만을 이용하여 div에 onclick 이벤트를 추가하는 방법입니다.

<div id='my-div' class='blue-div' >

</div>

.blue-div {
  width : 150px;
  height : 150px;
  background-color : blue;
}

window.onload = function () {
    var el = document.getElementById("my-div");
    el.onclick = hello;
}

function hello()  {
  alert('안녕하세요');
}

 

  [HTML]  

div에 'my-div'라는 id를 지정하였습니다.

 

  [JS]  

el.onclick = hello;

페이지가 로딩될 때

'my-div' element에 onclick 이벤트가 일어나면 hello 함수를 호출하도록 하였습니다.

이때, 'hello()'와 같이 뒤에 괄호를 붙이지 않도록 주의해야 합니다.

 

 

---

 

지금까지

div에 onclick 이벤트를 추가하는 방법을 알아보았습니다.

 

div에 마우스를 가져갔을 때,

마우스 커서가 손가락 모양으로 변경되도록 하는 방법은

지난 포스팅을 참조해 보세요.

[HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기

[HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기