JS function 문법과 매개변수(parameter), addEventListener

1. function(함수)의 사용하는 이유

• 재사용성
• 가독성
• 모듈화

function 작명(){
  코드내용
}

 

 

 

2. 매개변수(parameter)란

• 변수의 한 가지 종류이며, 함수 등에서 input의 데이터에 해당된다.
• 하나의 속성값 또는 object가 될 수 있다.

<div id="alert-box">알림창입니다.</div>

function 알림창(작동내용){
  document.getElementById('alert').style.display = 작동내용;
}

• 위 코드 창을 열기 닫기를 하는 2가지를 만들 수가 있다.

<button onclick="알림창('block')">열기</button>
<button onclick="알림창('none')">닫기</button>

알림창('block'); 
// 창 열기
// document.getElementById('alert').style.display = 'block';

알림창('none');
// 창 닫기
// document.getElementById('alert').style.display = 'none';

 

 

- 2개 이상의 파라미터도 가능하다.

• 더하기 함수, 곱하기 함수 

function sum(a, b){ 
  a + b
}

function product(a, b){ 
  a * b
}

 

 

3. addEventListener

• 이벤트가 발생 했을 때 그 처리를 담당하는 함수
• 이벤트 핸들러(event handler)라고  하기도 함
• 지정된 타입의 이벤트가 특정 요소에서 발생시, 그 요소에 등록된 이벤트 리스너를 실행
  • 필자의 경우는 이거 쓰면, onclick="저저꾸 어저꾸" 안써도 되서 좋은것 같음.

<div id="alert-box">심투입니다. <button id="close">닫기</button></div>

document.getElementById('close').addEventListener('click',function(){
            document.getElementById('alert-box').style.display = 'none';
        })

 

- 이벤트 종류들

• Click 이벤트 클릭시 실행
• mouseover 이벤트 마우스 갖다대면 실행
• scroll 이벤트 스크롤시 실행
• keydown 이벤트 키입력시 실행
• 그외 등등