JavaScript

[JavaScript] 이벤트 (수업 정리)

FRDYtheme 2022. 12. 9. 16:30

이벤트란?

- 무언가 일어났다는 신호

시스템에서 일어나는 사건(action) 혹은 발생(occurrence)

 

표준 이벤트 모델

  • eventTarget.addEventListener()
    • 대상 : Element, Document, Window, XMLHttpRequest ...

<작성 방식>

.addEventListener('이벤트 이름', 콜백함수 event handler);

고전 이벤트 모델

  • .onclick(function(){})
  • onblur()
  • onmouseenter...

(on 접두어)

  • .on('click', function(){})

브라우저 어디든 클릭하면 alert창 호출

  • .on('blur', function(){})
  • .on('mouseenter', function(){})
  • ...

인라인 이벤트 모델

  • <a href="#" onclick="fx()">

DOMContentLoad

자바스크립트는 위에서 아래로 순차적으로 읽기 때문에 <script></script>태그의 작성 위치에 따라

DOM의 제어가 원하는 대로 안될 수 있으므로 내부 스크립트로 작성하려면 닫는 body 태그 바로 위에 작성하는 게 제일 간편하지만

DOM의 불러오기를 제어하는 키워드를 사용할 수도 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>event2 - DOMContentLoad</title>
  <script><!-- ------헤드 위------ -->
    const h2 = text => `<h2>${text}</h2>` // text를 매개변수로 받는 함수
    document.body.innerHTML = h2('1번째') // '1번째'를 인수로 h2에 전달
    // DOM을 불러오기 전에 호출하므로 에러.
  </script>
</head>

<body>
  <script><!-- ------여는 바디 태그 바로 아래------ -->

  </script>
  <h1>event2 - DOMContentLoad</h1>
<script>
  
</script><!-- ------닫는 바디 태그 바로 위------ -->
<h2>h2태그</h2>
</body>
</html>

 

window.onload = function () {}

// DOM, CSSOM 등 모든 외부 노드를 불러왔을 때 실행해라.
window.onload = function () {
  const h2 = (text) => `<h2>${text}</h2>`; // text를 매개변수로 받는 함수
  document.body.innerHTML = h2("1번째"); // '1번째'를 인수로 h2에 전달
};

addEventListener('DOMContentLoaded', 콜백함수)

document.addEventListener('DOMContentLoaded', () => {
  document.body.innerHTML = 'DOMContentLoaded : 다른 외부 구조, 노드 상관없이 DOM만 불러오면 실행. 이미지나 영상을 기다리지 않음'
})

<script defer src="경로"></script>

script를 외부 링크 연결하고 defer 속성 사용.

이벤트 전달

이벤트 버블링 bubbling : 자식 -> 부모 순으로 이벤트 전달

이벤트 캡쳐링 capturing : 부모 -> 자식 순으로 이벤트 전달(IE지원 안 됨)

 

<html 구조>

안 쪽 박스를 클릭하면 event bubbling 발생.

이벤트 제어

<html 구조>

이벤트 버블링 제어 메서드

event.stopPropagation();

h1의 자식 요소인 a를 클릭해도 h1에는 이벤트 버블링 발생하지 않음.

event.preventDefault();

요소의 기본 성격 제거

 

removeEventListener

<html 구조>

<카운트 버튼을 누르면 h1의 숫자가 올라가게 만들기>

스크립트 태그가 body태그 위에 있으므로 DOMContentLoaded 안에 작성해준다.

카운트 버튼을 클릭하면 h1의 숫자가 올라간다.

<리셋 버튼을 눌러서 h1의 숫자를 초기화 시키기>

reset 버튼을 누르면 h1의 텍스트 콘텐트가 '클릭: 0'으로 덮어씌워짐.

<리무브 버튼을 눌러 카운트 버튼 이벤트 제거하기>

리무브 버튼 이벤트 콜백 함수 내에 카운트 버튼 이벤트 제거 함수 작성.

<복구 버튼을 눌러 카운트 버튼 이벤트 다시 추가하기>

복구 버튼을 누르면 카운트 버튼에 다시 기존 이벤트 추가

이벤트 모델

.addEventListener('이벤트 객체', 이벤트 핸들러)
  • 이벤트 핸들러 (event handler)
    • 이벤트 발생시 실행되는 코드 모음, 함수
    • 특정 요소에 지정된 이벤트가 발생하면 이벤트 리스너에 연결된 이벤트 핸들러 실행
  • 이벤트 리스너 event listener
    • 특정 이벤트에 대해 일어날 동작
    • 보통 이벤트 리스너와 이벤트 핸들러를 합쳐 이벤트 리스너라고 함.

마우스 관련 이벤트 유형

  1. click : 클릭 시 이벤트
event1.addEventListener('click', () => alert('클릭했습니다.'));
  1. dblclick : 더블 클릭 시 이벤트
event2.addEventListener('dblclick', () => alert('더블클릭했습니다.'));
  1. mousemove : 커서가 움직일 때 이벤트
event3.addEventListener('mousemove', () => console.log('마우스가 움직였습니다.'));
  1. mousedown : 클릭이 눌린 상태 이벤트
event4.addEventListener('mousedown', () => alert('눌렀습니다'));
  1. mouseup : 클릭을 뗐을 때 이벤트
event5.addEventListener('mouseup', () => alert('뗐습니다'));
  1. mouseover : 커서를 올렸을 때. 하위 노드에 영향을 줌
event6.addEventListener('mouseover', () => event6.style.backgroundColor = 'orange');
  1. mouseout : 커서가 벗어났을 때. 하위 노드에 영향을 줌
event7.addEventListener('mouseout', () => event7.style.backgroundColor = 'salmon');
  1. mouseenter : 커서를 올렸을 때 하위 노드에 영향을 주지 않음
event8.addEventListener('mouseenter', () => event8.style.border = '1px solid #000');
  1. mouseleave : 커서가 벗어났을 때. 하위 노드에 영향을 주지 않음.
event9.addEventListener('mouseleave', () => event9.style.border = '1px solid red');

키보드 입력 관련 이벤트 유형

  • focus: 입력 폼에 커서가 생겼을 때
  input.addEventListener('focus', () => alert('텍스트 필드에 포커스'))
  // 포커스가 깜빡여서 alert창 무한 반복 됨.
  • blur: 입력 폼에 커서가 사라졌을 때
  input.addEventListener('blur', () => {alert('텍스트 필드에서 벗어남.')})
  • keyup: 키가 떨어졌을 때
  input.addEventListener('keyup', () => input.style.color = 'tomato')
  • keypress: 키가 눌렸을 때. 브라우저에 따라 아시아 문자를 제대로 처리하지 못해 거의 사용하지 않음
  input.addEventListener('keypress', () => label.style.color = 'teal')
  • keydown: 키를 눌렀을 때
  input.addEventListener('keydown', () => input.style.fontSize = '1.3em')

 

이벤트 타겟

event. target- 실제 이벤트가 발생하는 요소를 반환.- 이벤트 리스너가 등록되어 있는 요소의 자식 요소 반환

 

event.currentTarget

- 이벤트를 호출한 요소를 반환(일반적으로는 버튼)

- 이벤트 리스너가 있는 요소를 반환.

 

<html 구조>

html 구조

 

<box1에 클릭 이벤트를 적용하고 target과 currentTarget 알아보기>

box1에 이벤트를 binding한 상태에서

<target과 currentTarget 의 차이를 활용해 자식 요소에 style값 적용 시키기>

 

https://developer.mozilla.org/ko/docs/Web/Events

 

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

 

'JavaScript' 카테고리의 다른 글

[JavaScript] 참조에 의한 객체 복사  (0) 2022.12.11
[JavaScript] 폴리필, 바벨  (0) 2022.12.11
[JavaScript] class 제어(수업)  (0) 2022.12.09
[JavaScript] 속성 property 접근_more  (0) 2022.12.08
[JavaScript] DOM객체 노드 탐색  (0) 2022.12.08

'JavaScript'의 다른글

  • 현재글[JavaScript] 이벤트 (수업 정리)

관련글

티스토리툴바