HTML 마우스 이벤트 중 마우스를 특정 영역에 올려두었을 때와 (포커스)
포커스 되지 않았을때 를 구별하는 동작을 구현 해봅니다.
먼저 예제를 만들어 봅니다.
<body>
<div onmouseover="this.style.backgroundColor='red'"
onmouseleave="this.style.backgroundColor='white'">ChangeBackground</div>
</body>onmouseover 속성 : 마우스가 해당 요소에 올려졌을때 (포커스 되었을때)
on mouseleave 속성 : 마우스가 해당 요소에서 벗어날때 (포커스 해제시)
위 코드는 해당 이벤트가 발생시 스타일로 배경색을 조정하는 예이며, 결과는 하기와 같습니다.
이외에도 마우스 관련 이벤트가 많습니다.
모든 것을 암기하지 말고, 필요할때 마다 html mouse event 등으로 검색해서 해당 예제등을 적용하면 되겠습니다.
감사합니다.
Mouse Events
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
반응형
'앱 만들기 > JavaScript' 카테고리의 다른 글
| 자바스크립트 변수에 대해서 (1) | 2023.08.16 |
|---|---|
| 자바스크립트 이벤트 (0) | 2023.08.15 |
| JS document.getElementbyID().innerHTML (1) | 2023.08.10 |
| JS 함수 사용 방법 (6) | 2023.08.08 |
| JS Object 선언 하는 방법 (3) | 2023.08.07 |
댓글