[자바스크립트] 이벤트 Event (2)

우리의 목적 DOM / DOM 에 이벤트 걸기

Aug 29, 2024

Contents

DOM DOM 에 이벤트 걸기 Event 정복하기

DOM

모든 객체가 window 이다. → 브라우저를 뜻함

document 가 바디영역을 의미.

라이브러리가 모든 바디영역을 갖고 있다.

window.document 하면 모든 영역에 접근이 가능하다.

document 안에 어떤 라이브러리가 있는지를 알아야 사용할 수 있다.

window.location → 화면 이동, 다른 주소로 get 요청 해줌

window.history → 콘솔에서 window.history 를 쳐보면 역사가 나온다. / window.history.go(-2) 치면 두칸 뒤로감

window 는 생략이 가능, 콘솔에서 history, document 만 입력해도 나온다.

자바스크립트로 DOM 을 찾아서 제어하려고 배우는 것이다.

목적을 잘 알고 공부해야 한다. 우리가 건드릴 것은 오직 DOM.

[이미지 출처] 너무 감사드립니다♡

Part 4. DOM

DOM의 개념을 이해한다.DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.DOM과 JavaScript의 차이에 대해 설명할 수 있다.브라우저의 렌더링 엔진은 웹 문서(H

https://velog.io/@starrypro/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 값이 그대로 나온다.

자주 사용하는 몇 가지만 해봤는데, 아래의 친구들 다 한번씩 테스트 해보도록 하자.

Contents

DOM DOM 에 이벤트 걸기 Event 정복하기

javascript

[자바스크립트] 이벤트 Event (2)

우리의 목적 DOM / DOM 에 이벤트 걸기

Aug 29, 2024

Contents

DOM DOM 에 이벤트 걸기 Event 정복하기

DOM

모든 객체가 window 이다. → 브라우저를 뜻함

document 가 바디영역을 의미.

라이브러리가 모든 바디영역을 갖고 있다.

window.document 하면 모든 영역에 접근이 가능하다.

document 안에 어떤 라이브러리가 있는지를 알아야 사용할 수 있다.

window.location → 화면 이동, 다른 주소로 get 요청 해줌

window.history → 콘솔에서 window.history 를 쳐보면 역사가 나온다. / window.history.go(-2) 치면 두칸 뒤로감

window 는 생략이 가능, 콘솔에서 history, document 만 입력해도 나온다.

자바스크립트로 DOM 을 찾아서 제어하려고 배우는 것이다.

목적을 잘 알고 공부해야 한다. 우리가 건드릴 것은 오직 DOM.

[이미지 출처] 너무 감사드립니다♡

Part 4. DOM

https://velog.io/@starrypro/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 값이 그대로 나온다.

자주 사용하는 몇 가지만 해봤는데, 아래의 친구들 다 한번씩 테스트 해보도록 하자.

Contents

DOM DOM 에 이벤트 걸기 Event 정복하기