[JavaScript] addEventListener 종류

 

addEventListener 종류 

 

 

addEventListener는 웹 페이지가 사용자의 행동에 동적으로 반응하도록 하거나, 특정 조건에서 특정 코드를 실행하려는 경우로 주로 사용한다.

지정한 이벤트가 발생하면 addEventListner에 등록된 함수가 실행된다.

 

객체.addEventListener('이벤트',함수);

 

 

 

click	마우스 클릭 했을 때
dbclick	더블 클릭 했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	마우스 버튼을 눌렀다 놓았을 때
dragdrop	마우스 버튼을 누른 상태에서 움직일 때
mouseover	마우스 커서가 지정영역 위로 올라올 때
mouseout	마우스 커서가 지정영역을 벗어났을 때
mousemove	마우스를 움직일 때
load	브라우저에서 문서를 읽어올 때
unload	브라우저에서 문서를 닫을 때
submit	폼이 제출될 때 발생
resize	창의 크기가 변경될 때
scroll	스크롤할 때
focus	요소가 포커스를 받을 때 발생
input, change	폼 필드의 값이 변경될 때 발생

 

 

 

 

JS 함수 안에서 할 수 있는 것들(밖에서도 가능(=전역변수처럼))

 

① 내용변경

- textContent

HTML 요소의 텍스트 내용을 가져오거나 변경된다.

 

- innerHTML

HTML 요소의 내부 HTML 내용을 가져오거나 변경하는데 사용된다. (ex) <>)

document.querySelector('div').innerHTML = '<p>새로운 내용</p>';

 

- value

input, select, textarea와 같은 폼 요소에 사용하고 HTML 요소의 값을 가져오거나 변경하는데 사용된다.

 

- getAttribute(name)

요소의 지정된 속성의 값을 반환한다.

var c = document.querySelector('.logo img');
c.setAttribute('src','./img/hotdeal.png');

 

- setAttribute(name,value)

요소의 지정된 속성의 값을 설정한다.

 

- removeAttribute(name)

요소의 지정된 속성을 제거한다.

 

 

② CSS 꾸미기

: HTML 요소의 스타일을 직접 변경하여 CSS와 같이 꾸밀 수 있다.

이를 위해 style 객체를 사용해 변경 할 수 있다.

 

- 색상 변경

 

color

document.querySelector('div').style.color='blue';

 

 

- 배경색 변경

 

backgroundColor

document.querySelector('div').style.backgroundColor='yellow';

 

 

 

- 폰트 크기 변경

 

fontSize

document.querySelector('div').style.fontSize='20px';

 

 

 

- 마진 변경

 

marginTop / marginBottom / margin

document.querySelector('div').style.marginTop='10px';

 

 

 

- 테두리 추가

 

border

document.querySelector('div').style.border='1px solid black';