JavaScript

[JavaScript] 이벤트(Event)

wwxs 2024. 8. 7. 12:51

이벤트 (Event)

  • 웹 페이지에서 발생하는 대부분의 일(사건)을 의미
  • ex) 사용자가 버튼을 클릭, 웹 페이지가 로드,  input 필드에 입력하는 것 등

 

이벤트 핸들링

  • 특정 이벤트에 반응해서 특정 동작을 실행하는 것을 의미
  • 이벤트 핸들러(이벤트 리스너)는 특정 이벤트가 발생했을 때 호출되는 함수

JS이벤트의 종류

더보기

1) 마우스 이벤트

click: 요소를 클릭할 때 발생
dblclick: 요소를 더블 클릭할 때 발생
mousedown: 마우스 버튼을 누를 때 발생
mouseup: 마우스 버튼을 뗄 때 발생
mouseover: 요소 위로 마우스를 올릴 때 발생
mouseout: 요소 밖으로 마우스를 뺄 때 발생
mousemove: 마우스가 움직일 때 발생

 

2) 키보드 이벤트

keydown: 키를 누를 때 발생
keyup: 키를 뗄 때 발생
keypress: 키를 누르고 있을 때 발생

 

3) 폼 이벤트

submit: 폼을 제출할 때 발생
change: 폼 요소의 값이 변경될 때 발생
focus: 폼 요소가 포커스를 받을 때 발생
blur: 폼 요소가 포커스를 잃을 때 발생

 

4) 문서 / 윈도우 이벤트

load: 페이지나 이미지 등이 모두 로드될 때 발생
resize: 윈도우 크기가 변경될 때 발생
scroll: 스크롤할 때 발생

 

이벤트 핸들러 등록 방법

1) HTML 이벤트 핸들러 속성(프로퍼티)

  • HTML 요소에 직접 이벤트 핸들러 속성을 설정 → HTML 요소를 JS의 객체로 가져와서 핸들러 속성을 설정
더보기 
(버튼에서 마우스 떨어질때 배경색 변경)

function random(number) {
return Math.floor(Math.random() * (number + 1))
}

function randomColorFunc() {
 return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
}

const bgButton = document.querySelector('#bgChange');

bgButton.onmouseout = function() {
  const randomColor = randomColorFunc();

  document.body.style.backgroundColor = randomColor;
}

    on - 키워드

  • 이벤트의 종류를 연결시켜주는 키워드
  • HTML 요소에 함수를 할당해서 이벤트를 연결

2) 인라인 이벤트 핸들러

  • 사용하지 않는 것을 권장 → 코드를 파싱(분석) 하기가 어려우며 유지보수의 어려움
더보기 
(클릭 시 text 색상 변경)
HTML
 <button 
  id="textChange" 
  style="font-size: 20px;"
  onclick="textChangeFunc()"
  >
    Change Text Color
  </button>
  <script src="./event01.js"></script>

JS
const textButton = document.querySelector('#textChange');

function textChangeFunc() {
  const randomColor = randomColorFunc();
  textButton.style.color = randomColor;
}

 

HTML 요소의 참조를 가지고 오는 방법

1. document.querySelector('선택자');

    : 같은 선택자 여러 개일 경우 첫 번째 요소만 가져옴

2. document.querySelectorAll('선택자')

    : 여러 개의 요소의 참조를 모두 가져와서 한 번에 이벤트 핸들러를 추가 → 해당 참조값들이 배열(리스트)로 저장

 

3) addEventListener() 메서드

  • 표준 이벤트 모델
  • HTML 요소에 addEventListener 메서드를 사용하여 이벤트를 등록하는 방법
  • 한 요소에 여러 개의 이벤트 핸들러 등록 가능
  • addEventlistener
더보기 
(버튼 클릭시 버튼 배경색 변경)

<HTML>
 <button class="btnsChange">Change Buttons Color</button>
  <button class="btnsChange">Change Buttons Color</button>
  <button class="btnsChange">Change Buttons Color</button>

<JS>
const btnsButton = document.querySelectorAll('.btnsChange');

btnsButton.forEach(btn => { 
  btn.addEventListener('click', function() {
    const randomColor = randomColorFunc();
    btn.style.backgroundColor = randomColor;
  })
})​

4) removeEventListener() 메서드 사용

  • 이벤트 핸들러를 제거하는 메서드
더보기 
const removeButton = document.querySelector('#remove');

let removeChange = () => {
  const randomColor = randomColorFunc();
  removeButton.style.color = randomColor;
}

removeButton.removeEventListener('click', removeChange);

 

 

이벤트 객체

  • 이벤트 핸들러가 호출될 때 브라우저가 자동으로 이벤트 객체를 생성하여 이벤트 핸들러에 전달
  • 이벤트와 관련된 다양한 속성과 메서드가 포함

 

이벤트 객체의 속성과 메서드

1) type

  • 이벤트 유형을 지정 ('click', 'change')

2) target

  • 이벤트가 발생한 요소를 참조
  • 실질적으로 이벤트가 발생한 요소
  • 이벤트 발생 시 변경을 적용할 요소를 결정하는데 유

3) currentTarget

  • 이벤트 리스너가 실제로 첨부된 요소를 참

4) preventDefault()

  • 브라우저가 해당 이벤트에 대해 기본적으로 수행하는 동작을 방지

5) stopPorpagation()

  • 이벤트가 전파되는 것을 방지

 

1. 이벤트 객체 사용 방법

  • 이벤트가 발생하는 함수에 매개변수로 전달
  • 매개변수의 명을 event, evt, e 등으로 명명을 권장
더보기 
<HTML>
  <h2>이벤트 객체</h2>
  <button id="colorChangeButton">색상 변경</button>
  <div id="colorDiv1" class="colorDiv"></div>
  <div id="colorDiv2" class="colorDiv"></div>
  <div id="colorDiv3" class="colorDiv"></div>
  <div id="colorDiv4" class="colorDiv"></div>


<JS>
const colorChangeButton = document.querySelector('#colorChangeButton');

colorChangeButton.addEventListener('click', bgChange);

const divs = document.querySelectorAll('.colorDiv');

for (let i = 0; i < divs.length; i++){
  divs[i].addEventListener('click', bgChange);
}

 

 

2. 이벤트의 기본 행동 방지

  • form 태그의 경우 submit 버튼 실행 시 내부의 데이터가 서버에 전송되고 페이지가 리로드
  • 이러한 기본 행동을 방지하는 메서드 : preventDefalt()
더보기 
<HTML>
<form>
    <div>
      <label for="fname">Name: </label>
      <input type="text" id="fname">
    </div>
    <div>
      <label for="fname">Email: </label>
      <input type="text" id="email">
    </div>
    <div>
      <input type="submit" id="submit">
    </div>
  </form>
  <p></p>


<JS>
const form = document.querySelector('form');
const fname = document.querySelector('#fname');
const email = document.querySelector('#email');
const p = document.querySelector('p');

// onsubmit 이벤트 등록
// : form 요소의 전송에 대한 이벤트를 감지

form.onsubmit = function(e) {
  // 이름과 이메일을 반드시 작성하도록 설정
  // 참조된 요소의 값(내용) 가져오기
  // : 참조값.value 속성을 사용

  if (fname.value === '' || email.value === ''){
    e.preventDefault();

    p.textContent = '이름과 이메일을 모두 입력해주세요 :)'
  }
}

 

3. 이벤트 전파 방지

더보기 
let parentDiv = document.querySelector('#parentDiv');
let childButton = document.querySelector('#childButton');

parentDiv.addEventListener('click', function() {
  console.log('부모 요소 클릭');
});

childButton.addEventListener('click', function(e) {
  console.log('자식 요소 클릭');

  // 이벤트 버블링은 자식에서 부모로 진행
  // : 이벤트객체.stopPropagation() 메서드를 사용하여 전파를 중지

  e.stopPropagation(); // 자식 요소에서 지정
});

 

페이지 로드 이벤트

  • DOMContentLoaded 이벤트
  • HTML 문서가 완전히 로드되고 DOM 트리가 완성되었을 때 발생
  • 이미지, CSS, 스크립트 파일이 아직 로드되지 않아도 이벤트 발생
더보기 
window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 트리가 완성되었습니다.');
})

'JavaScript' 카테고리의 다른 글

[JavaScript] 모듈  (0) 2024.08.11
[JavaScript] 내장 객체  (0) 2024.08.08
[JavaScript] 객체  (0) 2024.08.06
[JavaScript] 함수 심화  (0) 2024.08.06
[JavaScript] 배열(Array)  (0) 2024.08.05

'JavaScript'의 다른글

  • 현재글[JavaScript] 이벤트(Event)

관련글

티스토리툴바