[자바스크립트 기초 ]이벤트의 종류와 개념 1

자바스크립트 이벤트 종류

UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생

이벤트	설명
load	웹 페이지의 로드가 완료되었을 때
unload	웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize	브라우저의 창 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤 할 때

키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다.

이벤트	설명
keydown	사용자가 키를 처음 눌렀을 때
keyup	키를 땔 때
keypress	사용자가 눌렀던 키의 문자가 입력되었을 때

 

마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생

이벤트	설명
click	사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때
dbclick	두 번 눌렀다 땔 때
mousedown	마우스를 누르고 있을 때
mouseup	눌렀던 마우스 버튼을 땔 때
mousemove	마우스를 움직였을 때
mouseover	요소 위로 마우스를 움직였을 때
mouseout	요소 바깥으로 마우스를 움직였을 때

 

포커스 이벤트 – 포커스 이벤트

이벤트	설명
focus	요소가 포커스를 얻었을 때
focusin
blur	요소가 포커스를 잃었을 때
focusout

 

폼 이벤트 - 폼이벤트

이벤트	설명
input	<input>,<textarea>요소 값이 변경되었을 때
change	선택 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때
submit	사용자가 버튼키를 이용하여 폼을 제출할 때
reset	리셋 버튼을 클릭할 때
cut	폼 필드의 콘텐츠를 잘라내기 했을 때
copy	폼 필드의 콘텐츠를 복사했을 때
paste	폼 필드의 콘텐츠를 붙여넣을 때
select	텍스트를 선택했을 때

 

이벤트가 자바스크립트를 실행하는 법(이벤트 핸들링)

1.이벤트에 반응할 스크립트를 실행할 요소를 선택한다.

2.선택된 노드에서 어떤 이벤트가 발생했을 때 그에 반응할 것인지를 명시한다.

3.이벤트가 발생했을 때 실행될 코드를 작성한다.

 

요소에 이벤트를 바인딩하는 세가지 방법

 

1.html 이벤트 핸들러(권장 안함)

예) <a onclick=“hide()”>

사용자는 <a>요소를 클릭했을 때 hide() 라는 함수를 호출 한다.

 

//input 요소에 onblur 특성이 명시되어 있다. 특성 값은 이벤트가 발생했을 때 실행될 함수의 이름이다.

 

.html

<form method="post" action="http://www.example.org/register">

<label for="username">Create a username: </label>

<input type="text" id="username" onblur="checkUsername()" />

<div id="feedback"></div>

<label for="password">Create a password: </label>

<input type="password" id="password" />

<input type="submit" value="sign up!" />

</form>

 

 

.js

 

function checkUsername() { // 함수 선언

var elMsg = document.getElementById('feedback'); // feedback요소 선택

var elUsername = document.getElementById('username');//username 요소 선택

if (elUsername.value.length < 5) { // 이름이 5글자 미만이면

elMsg.textContent = '다섯글자 이상 부탁드립니다'; // 메시지 표시

} else {

elMsg.textContent = '';

}

}

 

// html 이벤트 핸들러 특성의 이름은 위의 표에서 살표본 이벤트의 이름과 동일하다. 앞에 on 이라는 전치사를 덧붙여 사용한다.

예를들면 <a> 요소는 onclik, onmouseover , onmouseout 이벤트를 제공한다.

<form>요소는 onsubmit 이벤트를 제공한다.

<input> 요소는 onkeypress, onfocus, onblur 등의 이벤트를 제공한다.

 

 

2. 전통적인 dom 이벤트 핸들러

장점은 주요 모든 브라우저에서 지원가능, 단점은 이벤트 별로 단 하나의 함수만 바인딩 할 수 있다.

 

예1)

element.onevent = functionName;

요소 . 이벤트 = 호출할 함수의 이름(괄호 생략)

function checkUsername(){

//사용자 이름의 길이를 검사하는 코드

}

var el = document.getElementById(‘username’);

el.onblur = checkUsername;

 

활용2)

function checkUsername() {

var elMsg = document.getElementById('feedback');

if (this.value.length < 5) {

elMsg.textContent = 'Username must be 5 characters or more';

} else {

elMsg.textContent = '';

}

}var elUsername = document.getElementById('username'); // 요소를 가져온다.

elUsername.onblur = checkUsername;

//요소가 포커스를 잃을때 checkuserName()함수 실행한다.

<참고>

- 선택된dom노드에서 이벤트가 발생했을 때 이름이 지정된 함수를 호출하려면 함수를 먼저 작성!

- dom 요소 노드는 변수에 저장된다.

- 함수의 세 번째 줄 조건식에서 사용자가 입력한 이름의 길이를 알아낼 때 this 키워드를 이용하고 있다. 대부분 브라우저는 this 키워드가 이벤트가 발생한 요소를 참조한다는 것을 알고 있기 때문에 정상적으로 작동한다. 하지만 ie8에서는 this 키워드를 window 객체로 취급해 버린다. 그 결과 어떤 요소에서 이벤트가 발생했는지 알지 못한다.

 

3. dom 레벨 2 이벤트 리스너

가장 많이 사용한다. ie8 에서는 동작하지 않지만 우회하는 방법이 있다.

dom과 이벤트에 대한 브라우저별 차이점은 jQuery를 사용하면 쉽게 해결할 수 있다. 그러나 jQuery 내부 동작을 이해하려면 이벤트가 어떻게 동작하는지 이해해야 한다.

 

element.addEventListener(‘event’, functionName[, 불리언]);

요소.addEventListener(‘노드에 바인딩될 이벤트’, 함수[, 이벤트 흐름])

 

fucntion checkUsername(){

//이름 검사

}

var el = document.getElementById(‘username’);

el.addEventListener(‘blur’, checkUsername, false);

 

.js

function checkUsername() {

var elMsg = document.getElementById('feedback');

if (this.value.length < 5) {

elMsg.textContent = 'Username must be 5 characters or more';

} else {

elMsg.textContent = '';

}

}

var elUsername = document.getElementById('username');

 

elUsername.addEventListener('blur', checkUsername, false);

//요소가 포커스를 잃을 때 checkUsername()함수를 호출한다.

 

참고

- addEventListener는 세 개의 속성을 가진다.

-대기하고자 하는 이벤트 . blur

-이벤트가 발생했을 때 실행될 코드 여기서는 checkUsername 함수를 사용한다. 이때 괄호를 생략하는 경우는 괄호를 사용하면 이벤트가 발생할 때가 아니라 페이지가 로드될 때 함수를 호출하라는 의미가 되기 때문이다.

-불리언 값은 어떻게 흘러갈지 결정

-이벤트 리스너를 제거 하려면 지정된 요소에 removeEventListener() 메소드 사용

 

매개변수를 가진 이벤트 핸들러와 리스너

-이벤트 핸들러나 리스너를 지정할 때 , 함수 이름 다음에 괄호를 사용할 수 없으므로, 인수를 전달해야 하는 경우에는 일종의 우회 방법이 필요하다.

-함수가 작업을 수행하기 위해 추가적인 정보가 필요한 경우에는 함수 이름 다음에 괄호를 이용하여 그 정보들을 제공한다.

그런데 js 해석기는 이벤트 핸들러에 지정된 함수에 괄호가 존재하는 경우에는 해당 이벤트가 발생할 때 까지 기다리지 않고 함수를 곧바로 실행해 버린다.

그렇기 때문에 이벤트 핸들러나 리스너가 호출하는 함수에 인수를 전달해야 한다면 함수를 익명함수로 감싸야 한다.

 

예)

el.addEventListener(‘blur’,function(){

checkUsername(5);

}, false);

 

예)

var elUsername = document.getElementById('username');

var elMsg = document.getElementById('feedback');

 

function checkUsername(minLength) { // 함수선언

if (elUsername.value.length < minLength) { // 사용자의 이름이 짧으면

elMsg.innerHTML = '이름은 ' + minLength + ' 글자 이상이어야 합니다';

} else { // 그렇지 않으면

elMsg.innerHTML = ''; // 오류메시지 제거

}

}elUsername.addEventListener('blur', function() { // 입력필드가 포커스를 잃으면

checkUsername(5); // 여기서 인수를 전달

}, false);

 

 

구 버전의 ie 지원하기

ie5부터 ie8 까지의 브라우저는 지금까지 알아본 것과는 다른 이벤트 모델을 채택하고 있어 addEventListener()메서드를 지원하지 않지만, 구 버전의 ie에서도 이벤트 리스너가 동작하게 만들 수 있다.

 

if (elUsername.addEventListener) { // 이벤트 리스너가 지원되면

elUsername.addEventListener('blur', function(){// username 필드가 포커스를 잃었을 때

checkUsername(5); // checkUsername() 함수 호출

}, false); // 전파되는 이벤트 캡쳐

} else { // 그렇지 않으면

elUsername.attachEvent('onblur', function(){ // IE8 이하에서는 on blur

checkUsername(5); // checkUsername() 함수호출

});

}

//if (elUsername.addEventListener) { 이 구문이 true를 리턴하면 요소가 메서드를 지원하고, false를 리턴하면 지원하지 않는다는 뜻이다.