[JavaScript] JavaScript 함수와 이벤트(function, event/event handler)

 함수

동작해야 할 목적대로 명령을 묶어 놓은 것

ex) alert()

 

 

함수 만드는 법

// 함수 선언(기본형)
function 함수명() {
    명령
}

// 함수 호출(기본형)
함수명 () or 함수명 (변수)

function addNum() {
    var n1 = 2;
    var n2 = 3;
    var sum = n1 + n2;
    alert(sum);
}

addNum();

 

 

익명 함수

일반적으로 아는 function

함수 자체가 식이므로 함수를 변수에 할당할 수도 있고, 매개변수로 사용 가능

 

var sum = function(a, b){
    retun a + b;
}

document.write(sum(1, 3));

 

 

즉시 실행 함수

식 형태로 선언하기 때문에 함수 선언 끝에 세미콜론(;) 붙임

 

(function(){
    명령
}());

or

(function(매개변수){
    명령
}(인수));

(function(a, b){
    sum = a, b;
}(1, 2));

document.write(sum);

 

 

화살표 함수

ES6 이후 사용하는 => 표기법

익명 함수에서만 사용 할 수 있음

 

(매개변수) => { 함수 내용 }

// 기본형
const hi = function() {
    return alert("안녕하세요?");
}

// 화살표 함수
const hi = () => { alert("안녕하세요?") };

// 기본형
let sum = function(a, b) {
    return a + b;
}

// 화살표 함수
let sum = (a, b) => a + b;

 

 

 이벤트

웹 브라우저나 사용자가 행하는 동자

주로 마우스나 키보드를 사용할 떄, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생

 

이벤트 종류

 

 마우스 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

 

 

 키보드 이벤트

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

 

 

 폼 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

 

 

 로드 및 기타 이벤트

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생

 

 

이벤트 처리기 (이벤트 핸들러)

이벤트가 발생했을 때 처리하는 함수

 

<태그 on이벤트명 = "함수명">

<a href="3" onclick="alert('버튼을 클릭했습니다.')"></a>

 

DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서  이벤트 처리기를 연결

 

// 버튼 클릭해서 글자색 바꾸기
<button id="change">글자색 바꾸기</button>
<p> String </p>

// 방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var chagneBttn = document.quertSelector("#change");
changeBttn.onclick = changeColor;

function changeColor() {
  document.quertSelector("#p").style.color = "#f00";
}


// 방법 2: 웹 요소를 따로 변수로 만들지 않고 사용
document.quertSelector("#change").onclick = changeColor;

function changeColor() {
  document.quertSelector("#p").style.color = "#f00";
}


// 방법 3: 함수를 직접 선언
document.quertSelector("#change").onclick = function() {
  document.quertSelector("#p").style.color = "#f00";
};