AddEventListener()
이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 말한다. 특정 타입의 이벤트가 임의로 정한 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행한다. 형식은 다음과 같다.
대상객체.addEventListener("이벤트명", f() => {실행할 함수});
addEventListener()의 이벤트명은 'on'을 제외한 이벤트명을 적어야한다.
마우스를 움직이면 박스의 좌표가 실시간으로 출력되도록 만들어보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_Event2.html</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid red;
background-color: yellow;
cursor: crosshair;
}
</style>
</head>
<body>
<h1>마우스 이벤트 처리하기</h1>
<div class="box"></div>
<script>
document.querySelector(".box").addEventListener("mousemove", (event) => {
console.log(event);
// offsetX, offsetY div안에서의 좌표이다 // pageX, pageY 웹브라우저 안에서의 좌표이다. // screenX, screenY 모니터안에서의 좌표이다.
// target 이벤트가 일어난 요소의 참조값이다.
// 이벤트가 일어난 곳의 상대좌표
let x = event.offsetX;
let y = event.offsetY;
// 이벤트가 일어난 요소(div)의 innerText로 출력
event.target.innerText = "x:" + x + " y:" + y; // document.querySelector(".box") == event.target
});
</script>
</body>
</html>추가로 key이벤트에 대해서 알아보자.
키보드 이벤트
1. keyup: 키보드를 눌렀을 시 발생
2. keydown: 키보드를 눌렀다가 떼었을 때 발생
3. keypress: 사용자가 키보드를 눌렀을 때 발생하나, Alt, Ctrl, Shift, Esc 키등 몇 가지 키에서는 이 이벤트를 발생시키지 않아 사용권장x
ex)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>key event 활용해보기</h1>
<input type="text" id = "one">
<div id = "key"></div>
<input type="text" id = "two">
<script>
document.querySelector("#one").addEventListener("keyup", (e) => {
let input = e.target.value;
document.querySelector("#key").innerText = input;
if(e.key=="Enter") {
e.target.value = "";
document.querySelector("#key").innerText = "";
document.querySelector("#two").value = input;
}
})
</script>
</body>
</html>
비가역적인사람