![[자바스크립트] 이벤트 Event (2)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-29T15%3A22%3A55.889Z-b9f59d6a-7aed-4740-b6dd-fab6bd83ee64&w=2048&q=75)
DOM
모든 객체가 window 이다. → 브라우저를 뜻함
document 가 바디영역을 의미.
라이브러리가 모든 바디영역을 갖고 있다.
window.document 하면 모든 영역에 접근이 가능하다.
document 안에 어떤 라이브러리가 있는지를 알아야 사용할 수 있다.
window.location → 화면 이동, 다른 주소로 get 요청 해줌
window.history → 콘솔에서 window.history 를 쳐보면 역사가 나온다. / window.history.go(-2) 치면 두칸 뒤로감
window 는 생략이 가능, 콘솔에서 history, document 만 입력해도 나온다.
자바스크립트로 DOM 을 찾아서 제어하려고 배우는 것이다.
목적을 잘 알고 공부해야 한다. 우리가 건드릴 것은 오직 DOM.
[이미지 출처] 너무 감사드립니다♡
DOM 에 이벤트 걸기
button 은 DOM, 이런 태그를 DOM 이라 한다.
이 친구의 DOM tree 는 body 에서 끝이다. 아주 간단.
DOM 에 이벤트를 걸어보자.
const 는 final 과 같아, 한번 담으면 변하지 않는 것을 의미한다.
“click” 클릭 되면 오른쪽 function() 이 바로 실행될테니, 이름이 필요없다. 클릭되면 자동 실행.
인수가 두 개다. (”click”, function() {~~})
자바스크립트가 매개변수로 function 을 받을 수 있는 이유는? 1급 객체니까!
아래는 실행 화면이다.
Listener 를 달 때에는 그만큼 연산이 많이 필요하다.
리스너를 다는 이유는 언제 실행될지 모르기 때문, 만일 그냥 실행되는거라면 리스너를 달 필요가 없다.
어떤 친구의 리스너인지 알아야 한다. DOM.리스너
리스너가 관찰하다가 “클릭” 을 하면 → “행위” 를 하게 한다. 연산이 엄청 많음
어떤 언어든 다 같다. 아래 세 개는 공통이다.
myBtn 어떤 대상에
“click” 무슨 행위를 했을 때 → 가 중요★
function () 뭘 할지
실습을 해봐야 한다.
Event 정복하기
DOM 이 다 읽어지고 실행되어야 하니, 자바스크립트 <script> 는 <body> 맨 끝에 넣어야 하는 것을 명심하자.
자주 사용하는 4 가지(click, keyup, change, mouseover) 와 radio 버튼과 checkbox 에 EventListener 를 설정했을 때 어떤 이벤트가 발생하는지 테스트 해보자.
1) dblclick
myBtn 을 더블클릭하면 MouseEvent 실행
2) change
input 태그에 무언가 입력만 했을 때는 아무것도 발생하지 않음.
change 의 경우, text 안에 뭘 적었다고 event 가 발생되는 게 아니라 커서가 다른 쪽을 클릭했을 때 event 가 발생한다. F12 열어서 확인
입력하고 다른 곳을 클릭하는 순간 Event 발생 (change)
버튼은 change 가 안먹힌다. myBtn 테스트 해봄.
3) mouseover
myBtn 에 커서를 가져다 올리니 바로 MouseEvent 발생
4) keyup
키보드를 떼는 순간 KeyBoardEvent 발생.
keydown 이 누를 때 이벤트가 발생하는 건데, 그럴 경우 아래와 같이 꾹 누르면 계속해서 이벤트 발생되기 때문에 keydown 보다는 up 을 많이 사용한다.
5) radio button
id=myRadio2 인 라디오버튼을 눌렀을 때, 이벤트가 발생하게 한다.
6) checkbox
체크 박스를 클릭 했을 때, 이벤트 발생
클릭 된 체크 박스를 뗐을 때에도 이벤트 발생
e.target.value
console.log(e.target.value); 로 value 값 확인해보기 
button 에는 내가 value 값을 설정 하지 않았으니, 당연히 안나옴.
input type 은 내가 입력한 값이 value 로 나오고,
라디오버튼과 체크박스는 내가 넣어준 value 값이 그대로 나온다.
자주 사용하는 몇 가지만 해봤는데, 아래의 친구들 다 한번씩 테스트 해보도록 하자.
Share article
![[자바스크립트] DOM 나타내기 (4)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-31T07%3A16%3A00.665Z-02f39e68-5295-46c2-aba9-6834b8b49f39&w=750&q=75)
![[자바스크립트] DOM 숨기기 (3)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-31T06%3A22%3A34.652Z-5a3bc5d7-dcb0-4e18-963c-65f31184de0b&w=750&q=75)
![[자바스크립트] 기본 문법 (1)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-29T15%3A01%3A23.549Z-ad4c35fe-94df-426c-9c7c-6b02f6eaacfc&w=750&q=75)
![[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (2)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-28T15%3A59%3A07.483Z-e3dbcbb7-55ef-4679-bbb8-986411bce9c3&w=750&q=75)