Event 종류(심층)자바스크립트2024. 9. 3. 15:38
Table of Contents
728x90
반응형
- Event 종류
1. Mouse Event
const submitBtn = document.querySelector(".submit-btn");
const form = document.querySelector("form");
const title = document.querySelector("h2");
// EVENT
submitBtn.addEventListener("click", handleEvent);
submitBtn.addEventListener("dblclick", handleEvent);
submitBtn.addEventListener("mousedown", handleEvent); // 요소를 클릭했을 때
submitBtn.addEventListener("mouseup", handleEvent); // 요소를 클릭했다가 마우스를 뗄 때
submitBtn.addEventListener("mouseenter", handleEvent); // 요소 위에 마우스가 올라갔을 때
submitBtn.addEventListener("mouseleave", handleEvent); // 요소 위에서 마우스가 벗어났을 때
function handleEvent(e) {
// 원래 기본 동작을 방지
e.preventDefault();
console.log(`Event Type: ${e.type}`);
// Event Type: click, dblclick, mousedown....
title.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;
// MouseX: 34 MouseY: 15
}
- mousedown vs click
어떠한 요소를 클릭했을 때 먼저 mousedown 이벤트가 발생하고
마우스를 놓았을 때 click 이벤트가 발생한다.
mousedown => mouseup => click
2. Form Event
아래의 이벤트들이 발생했을 때 title 값이 input에 입력한 값으로 변경된다.
const form = document.querySelector("form");
const emailInput = document.getElementById("email");
// FORM EVENT
form.addEventListener("submit", handleEvent);
emailInput.addEventListener("keydown", handleEvent);
emailInput.addEventListener("keyup", handleEvent);
emailInput.addEventListener("keypress", handleEvent); // 사용자가 눌렀던 키의 문자가 입력되었을 때 발생
emailInput.addEventListener("focus", handleEvent); // input에 focus(마우스로 클릭했을 때)
emailInput.addEventListener("blur", handleEvent); // input에 focus를 풀었을 때(마우스로 클릭했다가 input 외를 클릭했을 때)
emailInput.addEventListener("cut", handleEvent); // input에 입력한 문자를 잘라냈을 때
emailInput.addEventListener("paste", handleEvent); // input에 문자를 붙여넣기 했을 때
emailInput.addEventListener("input", handleEvent); // input 요소 값이 달라질 때
function handleEvent(e) {
// submit 이벤트가 발생했을 때만 원래 기본 동작을 방지
if (e.type === "submit") {
e.preventDefault();
}
console.log(`Event Type: ${e.type}`);
// Event Type: click, dblclick, mousedown....
//title.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;
// MouseX: 34 MouseY: 15
title.textContent = e.target.value;
}
728x90
반응형
'(심층)자바스크립트' 카테고리의 다른 글
javascript prototype (0) | 2024.09.04 |
---|---|
OOP(Object-oriented-programming) (0) | 2024.09.03 |
DOM Event (0) | 2024.09.03 |
Document Object 이용해보기 (0) | 2024.09.03 |
DOM이란? (0) | 2024.08.30 |
@min' :: 개발을 하자
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!