자주사용하는이벤트(Event)
- 마우스 이벤트 : dblclick
- 키보드 이벤트 : keyup, keydown
- 포커스 이벤트 : focus, blur
- window 이벤트 : resize
dblclick
- 더블클릭하면 실행, 한번 클릭하면 아무 반응이 없습니다.
<body>
<button id="btn">클릭</button>
<script>
function sayHello() {
alert("Hi");
}
const el = document.getElementById("btn");
el.addEventListener("dblclick", sayHello);
</script>
</body>
keyup
- 키보드 이벤트는 키보드 입력시 발생하는 이벤트이다.
console창을 확인해보면 키를 입력할때마다 keyup이 찍히는걸 볼 수 있다.
body>
<button id="btn">클릭</button>
<input id="txt" type="text">
<script>
function sayHello(){
alert("Hello");
}
const el = document.getElementById("btn");
el.addEventListener("dblclick", sayHello);
const input = document.getElementById("txt");
input.addEventListener("keyup", ()=>{
console.log("key up");
});
</script>
</body>
- keyup 핸들러는 이벤트객채(event)를 인수로 받음.
- 결과값
- "텍스트" : 입력한 특정 텍스트가 콘솔창에 출력됨
- event : 해당 키보드 이벤트 관련된 모든 정보가 콘솔창에 출력됨
- event.key : 오직 키보드 값만 콘솔창에 출력됨
인수로 event를 받아보겠습니다.
<body>
<button id="btn">클릭</button>
<input id="txt" type="text">
<script>
function sayHello(){
alert("Hello");
}
const el = document.getElementById("btn");
el.addEventListener("dblclick", sayHello);
const input = document.getElementById("txt");
input.addEventListener("keyup", (event)=>{
console.log(event);
});
</script>
</body>
콘솔창을 통해 확인해보면 keyboardEvent라고 찍힙니다.
어떤글자를 입력했는지도 볼 수 있고 눌러보면 여러가지 정보들을 볼 수 있습니다.
여러가지 정보 중에 type에 keyup이 있습니다.
event.key를 console로 확인해보면 아래와 같습니다.
- keyup : 누른 키에서 손을 뗄 때 실행
- keydown : 키보드를 누를 때 실행, 키를 누르고 있을 때 단 한번만 실행
- keypress : 키보드를 누를 때 실행, 키를 누르고 있을 때 계속 실행
- 이벤트 발생 순서 : keydown -> keypress -> keyup 순으로 진행
focus, blur
- focus : input창에 포커스가 가면 발생
- blur : 포커스를 잃을 때 발생
<body>
<input id="txt" type="text">
<script>
const input = document.getElementById("txt");
input.addEventListener("focus", ()=>{
input.style.backgroundColor="red";
});
input.addEventListener("blur", ()=>{
input.style.backgroundColor="blue";
})
</script>
</body>결과화면입니다. 인풋에 포커스를 올렸을때 빨간색, 포커스를 잃을때 파란색이 나옵니다.
mousemove
- 마우스를 움직일때마다 발생하는 이벤트입니다.
<body>
<div id="box"
style="width:100px; height:100px; border:2px solid red";
></div>
<script>
const box = document.getElementById("box");
box.addEventListener("mousemove", event=>{
console.log(event);
})
</script>
</body>
console창에서 clientX와 clientY를 확인하면
마우스포인터의 위치를 알 수 있습니다.
아래는 박스안에 원이 마우스를 따라다니는 코드입니다.
<body>
<div id="box"
style="position:relative; width:100px; height:100px; border:2px solid red";
>
<div id="circle"
style="position:absolute;
width : 10px;
height : 10px;
background-color:black;
border-radius:50%;
">
</div>
</div>
<script>
const box = document.getElementById("box");
const circle= document.getElementById("circle");
box.addEventListener("mousemove", event => {
circle.style.top = `${event.clientY}px`;
circle.style.left =`${event.clientX}px`;
});
</script>
</body>결과를 확인해보시면 마우스포인터의 위치에 따라 원이 움직임을 알 수 있고
콘솔창을 확인해보면 top이랑 left의 위치가 변하는 것을 확인할 수 있습니다.
window
- 창 크기가 바뀔 때마다 이벤트가 발생합니다.
- resize
<body>
<script>
window.addEventListener("resize", ()=>{
document.body.innerText=`현재 창 크기는 ${window.innerWidth}
* ${window.innerHeight}`;
});
</script>
</body>
'프론트엔드 > javascript' 카테고리의 다른 글
| 자바스크립트 - 변수와 상수 (0) | 2023.05.20 |
|---|---|
| 자바스크립트 DOM & EVENT # 이벤트버블링(Event Bubbling), 이벤트 위임(Event Delegation) (0) | 2023.05.01 |
| 자바스크립트 DOM & EVENT #5.1 이벤트 핸들러(Event Handler) (0) | 2023.04.27 |
| 자바스크립트 DOM&EVENT #4 CSS style, class 제어 (0) | 2023.04.26 |
| 자바스크립트 DOM&EVENT #3 노드생성,추가,복제,삭제 (0) | 2023.04.14 |
