[HTML/Javascript] 🖱️클릭 이벤트 처리 하는 방법

<input> 이나 <div>나 무엇이든, html로 표현하여 웹에 보여지는 것들은 '클릭 이벤트'를 처리할 수 있다.

---

이벤트리스너 설정하기(addEventListener)

*HTML
<input id="cell1" type="text">

*Javascript
document.getElementById('id 이름').addEventListener('click', 실행할 함수);
ex) document.getElementById('cell1').addEventListener('click', colorCilckedLocation)

document.getElementById('cell1').addEventListener('click', colorCilckedLocation) 코드에서 함수 뒤에 괄호로 매개변수를 주지 않는 이유는 함수의 참조를 전달하기 위해서이다.

괄호를 붙이면 함수가 즉시 실행되고, 그 실행 결과가 이벤트 리스너로 설정된다. 반면에 괄호 없이 함수 이름만 전달하면, 이벤트가 발생할 때 해당 함수가 호출되도록 참조를 전달하게 된다.

---

호출할 함수 설정; event

// 셀 클릭 시에 해당 셀 색 설정
function colorCilckedLocation(event) {

    const cellID = event.target.id;  //string
    .
    .
    .
}

 

 

내가 클릭한 cell의 ID를 받아오기 위한 코드는 위와 같다. ID를 가져옴으로써 cell의 다양한 정보를 불러올 수 있다.

 

+)호출할 함수는 매개변수 이름을 event로 사용하는 것이 불문율인 듯하다.

+) event의 type은 object 이다.

typeof(event)  // object

---

이벤트 리스너에 매개변수를 넣어야 할 때는

document.getElementById('cell1').addEventListener('click', function() {
    colorCilckedLocation(someParameter);
});

이벤트 리스너에 직접 매개변수를 전달하려면 익명 함수를 사용해주면 된다. 필요한 매개변수를 포함한 함수 호출을 감싸서 말이다.