[javascript]자바스크립트 이벤트리스너

 

1. UI 재사용: 함수에 "구멍(파라미터)" 뚫기

알림창이 100개 필요하다고 해서 HTML을 100개 만들 필요는 없습니다. 하나의 알림창을 만들어 두고, 내용만 바꿔서 재사용하는 것이 가장 효율적입니다.

• 나쁜 예: 아이디알림창(), 비번알림창() 등 함수를 기능별로 계속 만들기
• 좋은 예: 파라미터를 사용해 글자만 전달하기

// 함수 하나로 돌려쓰기
function openAlert(text) { 
  document.getElementById('title').innerHTML = text; 
  document.getElementById('alert').style.display = 'block'; 
}

// 사용 시
// <button onclick="openAlert('아이디 입력하셈')">버튼1</button>
// <button onclick="openAlert('비번 입력하셈')">버튼2</button>

 

2. 더 강력한 셀렉터: getElementsByClassName

ID가 아닌 Class로 요소를 찾을 때 사용합니다. ID와 달리 Class는 여러 개 존재할 수 있으므로 반드시 **[순서]**를 지정해야 합니다.

• 문법: document.getElementsByClassName('클래스명')[순서]
• 특징:
  • [0]은 첫 번째 요소, [1]은 두 번째 요소를 의미합니다.
  • 컴퓨터는 숫자를 0부터 세기 때문입니다.
  • 주의: 뒤에 인덱스[0]를 붙이지 않으면 작동하지 않습니다.

3. 깔끔한 코드의 완성: 이벤트 리스너 (EventListener)

HTML 안에 onclick="..."을 길게 적는 것은 지저분합니다. JS 파일에서 직접 이벤트를 감시하도록 만드는 것이 '요즘 방식'입니다.

// 문법
document.getElementById('close').addEventListener('click', function(){
    // 클릭하면 실행할 코드
    document.getElementById('alert').style.display = 'none';
});

 

 

• 이벤트 종류 (Event):
  • click: 클릭했을 때
  • mouseover: 마우스를 올렸을 때
  • scroll: 스크롤 할 때
  • keydown: 키보드 입력을 할 때
• 콜백함수 (Callback Function):
  • addEventListener의 두 번째 인자로 들어가는 function(){} 처럼, 함수 파라미터 자리에 들어가는 함수를 뜻합니다.
  • "이벤트가 발생하면 이 함수를 나중에(Back) 실행해줘(Call)!" 라는 의미로 이해하면 쉽습니다.

요약 및 팁

1. 확장성: HTML을 복사하지 말고 JS로 내용을 변경하자.
2. 정확성: getElementsByClassName은 반드시 몇 번째인지 [ ]로 알려줘야 한다.
3. 가독성: HTML과 JS를 분리하기 위해 addEventListener를 생활화하자.