JS 1차시 과제

이벤트 리스너란?

이벤트 리스너는 DOM 이벤트 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는

오브젝트이다.

이벤트 리스너를 이용하면 특정 DOM에 JavaScript 이벤트가 발생할 때 특정 함수를 호출한다.

 

1.  폼 이벤트

focus : 요소에 포커스가 되었을 때 발생함

blur : 요소에서 포커스가 빠져나갈 때 발생함

change : 요소에 값이 변경 되었을 때 발생함

submit : submit 버튼을 눌렀을 때 발생함

reset : reset 버튼을 눌렀을 때 발생함

select : input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 발생함

 

2. 마우스 이벤트

click : 마우스 클릭 시 발생함

dbclick : 마우스 더블클릭 시 발생함

mouseover : 마우스 오버 시 발생함

mouseout : 마우스 아웃 시 발생함

mousedown : 마우스를 눌렀을 시 발생함

mouseup : 마우스를 떼었을 시 발생함

mousemove : 마우스를 움직였을 시 발생함

contextmenu : context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 발생함

 

3. 키 이벤트

keydown : 키를 눌렀을 때 발생함

keyup : 키를 떼었을 때 발생함

keypress : 키를 누른 상태에서 발생함

 

4. 로드 및 UI 이벤트

load : 페이지의 로딩이 완료되었을 때 발생함

abort : 이미지의 로딩이 중단되었을 때 발생함

unload  : 페이지가 다른 곳을 이동될 때 발생함

resize : 요소에 사이즈가 변경되었을 때 발생함

scroll : 스크롤 바를 움직였을 때 발생함

 

메소드란?

객체 안에 프로퍼티로 정의된 함수

 

1. 문자열 메소드

length : 문자열 길이

toUpperCase() : 소문자 -> 대문자

toLowerCase() : 대문자 -> 소문자

indexOf(text) : 문자를 인수로 받아 몇 번째 위치인지 알려줌

slice(n, m) : n부터 m까지의 결과를 반환함

substring (n, m) : n과 m 사이의 문자열 반환함

substr(n, m) : n부터 시작해서 m개를 가져옴

trim() : 앞 뒤 공백 제거

repeat(n) : n번 반복함

 

2. 객체 메소드

Object.assign() : 객체 복제

Object.keys() : 키를 배열로 반환

Object.values() : 값을 배열로 반환

Object.entries() : 키/값을 배열로 반환

Object.fromEntries() : 배열로 된 키/값을 객체로 반환

 

3. 배열 메소드

arr.push(elements) : 배열의 맨 뒤에 elements를 추가한다. arr의 length를 return함

arr.pop() : 배열의 맨 뒤쪽 요소를 제거한다. 제거한 요소를 return한다.

arr.unshift(elements) : 배열의 맨 앞에 elements를 추가한다. arr의 length를 return함

arr.shift() : 배열의 맨 앞쪽 요소를 제거한다. 제거한 요소를 return한다.