Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- close together
- css 오버레이
- 정규표현식
- flex-grow
- Engoo
- express-handlebars
- Sass
- JS
- css variables
- Object.create
- node
- Express
- es6
- select by attribute
- improve-iq-by-up-to-10%!
- 무료 백엔드 배포
- flex-shrink
- css grid
- just-one-small-sip
- module wrapper function
- Node.js
- img 확대
- flex-basis
- shit-christmas
- css
- ajax
- Prototype
- 디자인패턴
- flexbox
- regExp
Archives
- Today
- Total
Mouse events 본문
mouseover, mouseout과 mouseenter,mouseleave의 차이를 확실히 알자
const clearBtn = document.querySelector(".clear-tasks");
const card = document.querySelector(".card");
const heading = document.querySelector("h5");
// Click
// clearBtn.addEventListener("click", runEvent);
// Double Click
// clearBtn.addEventListener("dblclick", runEvent);
// Mousedown => 마우스를 누른 순간(떼는 동작은 따로 있음)
// clearBtn.addEventListener("mousedown", runEvent);
// Mouseup => 누른 마우스를 뗄 때
// clearBtn.addEventListener("mouseup", runEvent);
// Mouseenter => 마우스가 해당 영역에 들어갈 때
// card.addEventListener("mouseenter", runEvent);
// Mouseleave => 마우스가 해당 영역을 들어갈 때
// card.addEventListener("mouseleave", runEvent);
// Mouseover => 마우스가 해당 요소의 영역 또는 포함된 다른 영역을 들어갈 때
// card.addEventListener("mouseover", runEvent);
// Mouseout => 마우스가 해당 영역 또는 포함된 다른 영역을 떠날 때
// card.addEventListener("mouseout", runEvent);
// Mousemove => 해당 요소 안에서 마우스를 움직일 때마다
card.addEventListener("mousemove", runEvent);
// Event Handler
function runEvent(e) {
console.log(`EVENT TYPE: ${e.type}`);
heading.textContent = `MouseX: ${e.offsetX}, MouseY: ${e.offsetY}`;
document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 40)`;
}
'2021 프론트 엔드 로드맵 따라가기 > JS' 카테고리의 다른 글
Event Bubbling & Delegation (0) | 2021.05.31 |
---|---|
Key & Input events (0) | 2021.05.31 |
Replace & Remove Elements (0) | 2021.05.31 |
Creating Elements (0) | 2021.05.31 |
traversing dom (0) | 2021.05.30 |
Comments