<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);
});
이벤트 리스너에 직접 매개변수를 전달하려면 익명 함수를 사용해주면 된다. 필요한 매개변수를 포함한 함수 호출을 감싸서 말이다.
'웹 프로그래밍 > 기초' 카테고리의 다른 글
[HTML/Javascript] 자바스크립트로 HTML의 요소에 자식 요소 추가하기 (2) | 2024.06.08 |
---|---|
웹 프로그래밍 기초 4일 - 피아노 건반 구현🎹 (0) | 2024.05.26 |
HTML - 클래스 특징 (0) | 2024.05.26 |
웹 프로그래밍 기초 3일 - 스도쿠 채점기 (0) | 2024.05.22 |
HTML - 하이퍼링크 걸기 (0) | 2024.05.22 |
댓글