Event_JavaScript

Event

• interaction HTML이나 CSS만으로 구현할 수 없고, 자바스크립트 코딩이 필요하다
• 특정요소에 interactive한 반응을 할 수 있게 하는것

  • 클릭 이벤트

• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면 크기 변화) 이벤트

addEventListener

• 이벤트를 달 때 사용하는 함수이름
• 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행
• 인자로 전달된 함수(callback함수)

  요소.addEventListener(이벤트종류, function(){
  //이벤트가 일어났을 때 실행할 내용
  });

클릭이벤트

• 로그인 버튼 클릭 -> 로그인 api 호출
• 상품 사진 클릭 -> 상품 상세 화면으로 이동
• 자세히 보기 버튼 클릭 -> 팝업화면 출력

  • event 함수 추가 DOM사용
    

const thisIsButton = document.getElementsByClassName('login-btn')[0];
- thisIsButton이라는 변수에 .login-btn요소를 찾아 저장
- [0]이 붙은 이유: class는 중복해서 사용 할 수 있기 때문에 많아서 해당 요소를 가져오게 한다

thisIsButton.addEventListener('click', function() {
  //click 했을 때 실행되어야할 기능
});
- 위 요소에 addEventListener을 달아준다
- 첫번째 인자에 실행할 이벤트명, 실행할 함수명

키 이벤트

• 키보드를 눌렀을 때 발생하는 keydown
• 키보드를 누르고 떼는 순간 발생하는 keyup
• 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress

마우스 이벤트

onMouseEnter

• 마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생하는 이벤트
• 요소 밖으로 나갔다 오지 않으면 계속 발생하지 않음
• 마우스가 오브젝트 위로 올라갔을 때 호출

onMouseOver

• onMouseOut의 반대 개념
• 마우스 포인터가 요소 안으로 들어올때 + 자식 요소 출입시 발생하는 이벤트
• 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올때 발생
• 마우스가 오브젝트 위에 있으면 계속 호출됨

onMouseOut

• onMouseOver의 반대개념
• 마우스 포인터가 요소 밖으로 나갈때 + 자식 요소 출입시 발생하는 이벤트
• 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생

onMouseMove

• 마우스 포인터가 요소 위에서 움직일 때(자식포함) 발생하는 이벤트
• 요소 위에서 마우스를 움직이면 계속 발생

onMouseExit

• 마우스가 오브젝트에서 벗어났을 때 호출

onMouseLeave

• 마우스를 해당 요소안에서 바깥으로 옮겼을때 발생
• 버블링이 발생하지 않는다

onMouseUp

• onMouseDown이 일어난 후에 마우스를 때면 호출(onMouseDown이 일어나지 않으면 호출되지 않음)

onMouseDown

• 오브젝트 위에서 마우스 왼쪽 버튼이 눌렸을때 호출