4일차(4) javascript 기초 : event
- button, h1등도 넓은 의미에서는 object type이다.(문서 오브젝트document object라고 함)
→ object라는것은 key 값과 heap 영역을 가진다는 뜻!
<예제1>
<!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>Step03_event.html</title>
</head>
<body>
<h1>이벤트 처리</h1>
<!--
이벤트 처리를 onXXX="" 속성을 사용해서 처리하면 global 변수(함수)가 필요하다.
global 변수(함수)를 많이 만드는 것은 바람직하지 않다.
-->
<button onclick="clicked()">눌러보셈</button>
<button id="myBtn">눌러보셈2</button>
<script>
//어디에서나 사용할 수 있는 global 변수를 만들어서 function type data 대입하기
let clicked=function(){
alert("버튼을 눌렀네요?");
};
/*
id가 myBtn인 요소에 click이라는 이벤트가 일어났을 때
호출된 예정인 함수(callback함수) 등록하기
.addEventListener(이벤트명, callback 함수)
*/
document.querySelector("#myBtn").addEventListener("click", function(){
alert("버튼을 눌렀네요?");
});
</script>
</body>
</html>- 버튼2개: 눌러보셈 / 눌러보셈2 의 차이!
실행되는 내용은 똑같지만 첫번째는 onclick을, 두번째는 id를 지정해서 document.querySelector를 사용
- global 변수(함수)를 많이 만드는 것은 바람직하지 않다. 두번째 버튼처럼 작성하는 것이 좋음.
- document.querySelector() 의 선택자로 id값을 세팅하면 상단 버튼의 값이 들어온다.
- .addEventListener은 모든 이벤트 객체에 있는 기능으로, document의 특정 요소에 이벤트 등록시 사용
- "click" 부분에는 다양한 이벤트(string type)가 들어갈수있고, 뒤에는 function type이 들어갈 수 있다.
document.querySelector("#myBtn").addEventListener("click", function(){
alert("버튼을 눌렀네요?");
});- id가 myBtn인 요소에 click이라는 이벤트가 일어났을 때, 호출된 예정인 함수(callback 함수) 등록하기
- 예제에서는 알림창을 띄우는 함수 alert를 등록
.addEventListener(이벤트명, callback 함수)
- addEventListener 함수의 구조 외워두기!
- 함수를 호출하면서 해당 함수를 전달하는 구조.
(클릭 이벤트가 일어날때마다 함수가 실행된다)
<예제2>
<!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>Step03_event.html</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>mouse 이벤트 처리</h1>
<div class="box" id="one"></div>
<p id="info"></p>
<script>
document.querySelector("#one").addEventListener("mouseover", function(){
document.querySelector("#info").innerText="마우스를 올렸네?";
});
document.querySelector("#one").addEventListener("mouseout", function(){
document.querySelector("#info").innerText="마우스가 나갔네?";
});
</script>
</body>
</html>- 지정 위치(box)에 마우스가 들어갔을 때, 나왔을 때 box 안의 innerText를 바꾸기
- class .box 는 <style>을 지정, id #one, #info 는 <script>에서 동작 지정
document.querySelector("#one").addEventListener("mouseover", function(){});
document.querySelector("#one").addEventListener("mouseout", function(){});- id가 one인 박스에 mouseover/out 이 일어나면 function(){}의 함수가 실행된다. 는 의미!
<예제3>
<!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>Step03_event3.html</title>
<style>
.box{
width: 100px;
height: 100px;
border:1px solid red;
cursor: pointer;
}
</style>
</head>
<body>
<h1>마우스 이벤트 처리</h1>
<div class="box" style="background-color: aquamarine;">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>
<div class="box">div4</div>
<div class="box">div5</div>
<script>
//class 속성이 box인 요소에 click 이벤트가 일어났을 때 호출되는 함수 등록하기
for(let i=0; i<5; i++){
document.querySelectorAll(".box")[i].addEventListener("click", function(){
console.log("click!");
//이벤트 리스너 함수로 등록된 함수 내부에서 this 라는 예약어가 가리키는 것은?
console.log(this); // 이벤트가 일어난 바로 그 요소의 참조값을 가리킨다.
//이벤트가 일어난 바로 그 요소의 innerText에 문자열 출력하기
this.innerText="clicked!";
//css 조작하기
this.style.backgroundColor="yellow";
this.style.borderWidth="10px";
});
};
</script>
</body>
</html>
- 이벤트가 실행될 대상을 하나만 불러올때는 document.querySelector
이벤트가 실행될 대상이 여러 개이면 document.querySelectorAll
document.querySelectorAll(" ")[0].addEventListener("click",function){ });
class도 object임. 예제는 그 중에서도 배열(array)이다!
→ console 창에서 document.querySelectorAll(".box")[0] 형태로 찾을 수 있다.
for(let i=0; i<5; i++){
document.querySelectorAll(".box")[i].addEventListener("click", function(){
};for(let i=0; i<5; i++){ }
- 반복문 사용! 박스 div1~div5의 참조값이 무엇인지 지금은 모르기 때문에 찾기 위해서 querySelectorAll을 사용함
- 5개 박스에 모두 이벤트 발생시키려고 한다면, 반복문을 사용해서 이벤트를 전부 걸어주어야 한다.
- this란? 이벤트가 일어난 바로 그 요소의 참조값을 가리킨다.
console.log(this);
this.innerText="clicked!";
this.style.backgroundColor="yellow";
this.style.borderWidth="10px";
- this 가 무엇인지 모르겠다면 함수안에서 console.log(this); 로 확인해보기
- 위와 같이 innerText나 CSS(style 속성) 조작도 가능하다.
- 해당 문서 객체의 참조값만 있으면 어떤 문서 객체든 javascript로 조작할 수 있다.
<예제4>
<!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>Step03_event4.html</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>이벤트 처리</h1>
<div class="box"></div>
<script>
document.querySelector(".box").addEventListener("mousemove",function(event){
console.log("mousemove!");
//함수에 선언한 매개변수에 전달되는 값을 콘솔에 출력해서 무엇인지 구조를 관찰해보자.
console.log(event); //발생한 이벤트의 정보를 담고 있는 object가 전달이 된다.
//이벤트가 일어난 곳의 좌표
let x=event.offsetX;
let y=event.offsetY;
//div의 innerText에 출력해보기
this.innerText="x:"+x+" y:"+y;
});
</script>
</body>
</html>- div에서 mousemove가 일어날때마다 함수가 새롭게 호출되는 것.
document.querySelector(".box").addEventListener("mousemove",function(event){ };- 동작이 일어나면 → 함수가 호출되면서 → 매개변수 값(event) 도 같이 전달된다.
- 매개변수 값은 필요없으면 받지 않아도 된다.
console.log(event);
- 발생하는 이벤트의 상세 내용을 console에 출력할 수 있다.
- 원하는 정보를 얻어내고 싶다면 '매개변수(event)'를 설정하면 object{} 가 자동으로 전달된다.
- 방금 일어난 이벤트에 대한 정보는 object 에 다 들어있다. (마우스의 좌표, div의 위치 등등...)
let x=event.offsetX;
let y=event.offsetY;
this.innerText="x:"+x+" y:"+y;- document.querySelector(".box").addEventListener("mousemove",function(event){}); 안에서
위와 같이 설정하면 마우스 포인터 위치를 박스 안에 출력할 수 있다.
'국비교육(22-23)' 카테고리의 다른 글
| 5일차(2)/javascript 기초 : if, else 문 (0) | 2022.10.12 |
|---|---|
| 5일차(1)/javascript 기초 : 매개변수, 함수 (0) | 2022.10.12 |
| 4일차(3)/javascript 기초 : 반복문 loop (0) | 2022.10.11 |
| 4일차(2)/javascript 기초 : function - 매개변수 (0) | 2022.10.11 |
| 4일차(1)/javascript 기초 : function 요약 (0) | 2022.10.11 |