[JavaScript] 이벤트

Event

• 시스템에 일어나는 사건(action)
  • 마우스 클릭
  • 키 입력
  • 포커스
  • ...

이벤트 연결

1. 인라인 방식

• 속성 태그에 on이벤트 속성을 통하여 연결

<button onclick="js code..."></button>

• 동일한 이벤트 여러 개 적용 불가

2. 프로퍼티 방식

• 이벤트 핸들러 프로퍼티에 등록하여 사용

//버튼 요소 중 가장 첫번쨰 요소 선택
document.querySelecotr('button').onclick =  function() {
  let text = this.value
  console.log(text);
}

• this
  • 이벤트가 일어나는 대상
• 동일한 이벤트 핸들러 여러 번 사용 불가

3. 이벤트 리스너 방식

• 이벤트 리스너 메소드를 이용한 연결
  • addEventListner('이벤트',function(){})를 통하여 이벤트 등록
  • removeEventListner('이벤트',function(){})를 통하여 이벤트 제거

let btn = document.querySelector("button#test");
btn.addEventListener('click', function () {
    alert('이벤트 발생')
})

이벤트 종류

마우스 이벤트
click	대상 요소를 마우스로 클릭을 했다 떼는 이벤트
mouseover	대상 요소에 마우스 커서를 올리는 이벤트
mouseout	대상 요소에서 마우스 커서를 빼는 이벤트
mousemove	마우스를 움직이는 이벤트
키보드 이벤트
keypress	키를 누를 때, 문자 입력 전 기능키 인식 X / 대소문자 구분 O
keydown	키를 누를 때, 문자 입력 전 기능키 인식 O / 대소문자 구분 X
keydown	키를 땔 때, 문자 입력 후 기능키 인식 O / 대소문자 구분 X
UI 이벤트
load	페이지가 로드되는 이벤트 모든 요소가 모두 로드 되었을 때
unload	페이지 언로드되는 이벤트 새로운 페이지를 요청하거나, 페이지를 끌 때
scroll	페이지나 요소에서 스크롤을 하는 이벤트
포커스 이벤트
focus	포커스 되는 이벤트
blur	포커스를 잃는 이벤트
폼 이벤트
change	선택된 버튼이나 옵션이 바뀌는 이벤트
submit	폼을 제출하는 이벤트

이벤트 버블링, 이벤트 캡처링

• 이벤트 버블링
  • 자식요소에 이벤트가 발생하면 부모요소에도 그 이벤트가 전달
• 이벤트 캡처링
  • 부모요소에 이벤트가 발생하면 자식요소에도 그 이벤트가 전달

<div id="out">
    <h2>이벤트 버블링 체크</h2>
    <p id="in" >자식 p태그 클릭!</p>
</div>
<!--해당 상황에서 p태그 클릭시 div도 클릭됨-->

<script>
document.getElementById("out").onclick = function () {
    alert("out div click");
}
document.getElementById("in").onclick = function () {
    alert("in p click");
    event.cancelBubble=true;
    //자식 태그를 클릭했을떄 부모한테도 뜨는 버블링을 취소하는 코딩
}
</script>