[기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기

728x90

[기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기

~~1 함수 선언 및 호출~~

~~2 var, let, const~~

~~3 함수 표현식~~

4 이벤트와 이벤트 처리기

5 DOM을 이용한 이벤트 처리기

4 이벤트와 이벤트 처리기

이벤트란?

이벤트란 웹 브라우저나 사용자가 행하는 동작을 말하는데, 웹 문서 영역 안에서 이뤄지는 동작만을 말한다. 예를 들어 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다.

마우스 이벤트

종류	설명
click	사용자가 HTML 요소를 클릭할 때 이벤트 발생
dbclick	사용자가 HTML 요소를 더블클릭할 때 이벤트 발생
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트 발생
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 땔 때 이벤트 발생

키보드 이벤트

종류	설명
keydown	사용자가 키를 누르는 동안 이벤트 발생
keypress	사용자가 키를 눌렀을 때 이벤트 발생
keyup	사용자가 키에서 손을 뗄 때 이벤트 발생

문서 로딩 이벤트

종류	설명
abort	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생
error	문서가 정확히 로딩되지 않았을 때 이벤트 발생
load	문서 로딩이 끝나면 이벤트 발생
resize	문서 화면 크기가 바뀌었을 때 이벤트 발생
scroll	문서 화면 스크롤되었을 때 이벤트 발생
unload	문서에서 벗어날 때 이벤트 발생

폼 이벤트

종류	설명
blur	폼 요소에 포커스를 잃었을 때 이벤트 발생
change	목록이나 체크 상태 등이 변경되면 이벤트 발생 <input>, <select>, <textarea> 태그에서 사용
focus	폼 요소에 포커스가 놓였을 때 이벤트 발생 <label>, <select>, <textarea>, <button> 태그에서 사용
reset	폼이 리셋되었을 때 이벤트 발생
submit	submit 버튼을 클릭했을 때 이벤트 발생

이벤트 처리기

기본형

<태그 on이벤트명="함수명">

웹 문서에 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러라고 한다.

(ex. 버튼을 클릭하면 배경색 바꾸기)

...
<body>
  <ul>
    <li><a href="#" onclick="changeBg('green')">Green</a></li>
    <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
    <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
  </ul>
<div id="result"></div>
<script>
  function changeBg(color) {
    var result = document.querySelector('#result');
    result.style.backgroundCorlor = color;
  }
</script>
</body>
...

5 DOM을 이용한 이벤트 처리기

기본형

웹 요소.on이벤트명 = 함수;

DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결한다.

자바스크립트에서 웹 요소를 여러 방법으로 가져올 수 있는데 그중 함수 querySelector( )를 사용하여 가져오는 것이 쉽다.

(ex. 버튼 클릭해서 글자색 바꾸기)

...
<body>
  <button id="change">글자색 바꾸기</button>
  <p>Reprehenderit ..... laborum quis.</p>
  ...
  // 방법 1 : 웹 요소를 변수로 지정하고 미리 만든 함수 사용
  var changeBttn = document.querySelector("#change");
  changeBttn.onclick = changeColor;		// 함수 이름 뒤에 괄호 없다.
  
  function changeColor() {
    document.querySelector("p").style.color = "#f00";
  }
...

...
<body>
  <button id="change">글자색 바꾸기</button>
  <p>Reprehenderit ..... laborum quis.</p>
  ...
  // 방법 2 : 웹 요소를 변수로 만들지 않고 사용
  document.querySelector("#change").onclick = changeColor;
  
  function changeColor() {
    document.querySelector("p").style.color = "#f00";
  }
...

...
<body>
  <button id="change">글자색 바꾸기</button>
  <p>Reprehenderit ..... laborum quis.</p>
  ...
  // 방법 3 : 함수를 직접 선언
  document.querySelector("#change").onclick = function() {
    document.querySelector("p").style.color = "#f00";
  };
...

(ex. 버튼 클릭해서 설명글 열고 닫기 - DOM 이벤트 처리기 연결)

...
<div id="item">
  <img src="images/flower.jpg" alt="">
  <button class="over" id="open">상세 설명 보기</button>
  <div id="desc" class="detail">
    <h4>등심붓꽃></h4>
      <p>북아메리카 원산으로 ... 번식한다.</p>
    <button id="close">상세 설명 닫기</button>
  </div>
</div>
<script>
  document.querySelector('#open').onclick = function() {
    document.querySeclector('#desc').style.display = "block";
    document.querySeclector('#open').style.display = "none";
  }
  document.querySelector('#close').onclick = function() {
    document.querySeclector('#desc').style.display = "none";
    document.querySeclector('#open').style.display = "block";
  }
</script>
...

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[정리] 2 \| 객체, 자바스크립트의 내장 객체 정리 (0)	2022.08.23
[기본 개념] 2 \| (2.2) 브라우저와 관련된 객체 (1)	2022.08.23
[기본 개념] 2 \| (2.1) 객체, 자바스크립트의 내장 객체 (0)	2022.08.17
[정리] 1 \| 함수 선언 & 호출과 표현식, var let const, 이벤트와 이벤트 처리기 정리 (0)	2022.08.11
[기본 개념] 1 \| (1.1) 함수 선언 및 호출, var let const, 함수 표현식 (0)	2022.08.10