-
[JavaScript] 이벤트Legacy/Web 2015. 7. 14. 06:43728x90
브라우저에서 방문자가 취하는 모든 동작을 이벤트라고 한다. 예를 들어 마우스로 특정 요소를 클락하거나 마우스를 올리고 내리는 행위 등 모든 동작이 이벤트이다. 이 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 한다. 즉, 이벤트 발생 시 자바스크립트 코드가 실행된다. 주로 많이 사용되는 이벤트의 종류는 다음과 같다.
마우스 이벤트
onmouseover
지정한 요소에 올라갔을 때 발생
onmouseout
지정한 요소에서 벗어났을 때 발생
onmousemove
지정한 요소에서 움직일 때 발생
onclick
지정한 요소를 클릭 했을 때 발생
ondblclick
지정한 요소를 더블클릭 했을 때 발생
키보드 이벤트
onkeypress
지정한 요소를 키보드가 눌렸을 때(눌렀다뗌)
onkeydown
지정한 요소에서 키보드가 눌러졌을 때(눌림)
onkeyup
지정한 요소에서 키보드가 떼졌을 때
기타 이벤트
onfocus
지정한 요소에 포커스가 갔을 때
onsubmit
폼 요소에 전송 버튼을 눌렀을 때
이 외에도 아주 다양하니 링크를 참조
키보드 접근성
만약 마우스가 없다면 onmouseover 이벤트를 사용할 수 없다. 때문에 이에 대응되는 키보드 이벤트 핸들러를 지정해주어야 하는데, 이것을 키보드 접근성이라고 한다.
onmouseover는 onfocus에 대응되고
onmouseout은 onblur에 대응된다.
onclick 같은 경우 따로 등록하지 않아도 해당 요소가 선택된 상태에서 엔터 키를 누르면 이벤트가 발생한다.
이벤트 중복 등록
하나의 요소에 같은 이벤트 핸들러를 중복해서 등록하고 싶은 경우가 있다. 다음과 같은 HTML 요소와 스크립트 코드를 보자.
<button id="btn">버튼</button>
document.getElementById("btn").onclick=function(){
alert('실행문1');
}
document.getElementById("btn").onclick=function(){
alert('실행문2');
}
실행문1 이라고 되어있는 경고창은 실행되지 않습니다. 아래있는 내용이 나중에 실행되어 덮어써지기 때문입니다. 하지만 W3C에서는 방법을 제공하고 있습니다. 올바른 등록방법은 다음과 같습니다.
document.getElementById("btn").addEventListener("click", function(){
alert('실행문1');
}, false);
document.getElementById("btn").addEventListener("click", function(){
alert('실행문2');
}, false);
요소 선택.addEventListener("이벤트 종류", 함수명 또는 익명 함수, false);
하지만 IE8 버전 이하에서는 조금 다릅니다. IE8 버전 이하에서는 마이크로소프트가 W3C의 개발에 참여하지 않았기 때문입니다.
IE8 버전 이하는 다음과 같습니다.
document.getElementById("btn").addEventListener("onclick", function(){
alert('실행문1');
});
document.getElementById("btn").addEventListener("onclick", function(){
alert('실행문2');
});
이벤트 객체
사이트에 방문자가 지정한 요소에서 이벤트가 발생할 경우, 이벤트 핸들러에 이벤트 객체를 생성하여 실행문으로 사용할 수 있다. 이 이벤트 객체의 프로퍼티를 가지고 이벤트에 대한 다양한 정보를 얻어올 수 있다. 키보드 이벤트의 경우 구체적으로 어떤 키가 눌린 것인지 등의 정보를 말이다.
이벤트 객체는 다음과 같이 생성된다.
12345678910111213141516<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head><title> new document </title><meta http-equiv="content-type" content="text/html;charset=utf-8" /></head><body><script type="text/javascript">//<![CDATA[document.onkeydown=function(e){alert(e);}//]]></script></body></html>cs 하지만 이 방법은 IE8 버전 이하에는 적용할 수 없다. IE8버전과 동시에 지원하려면 다음과 같이 작성해야한다.
1234567891011121314151617<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head><title> new document </title><meta http-equiv="content-type" content="text/html;charset=utf-8" /></head><body><script type="text/javascript">//<![CDATA[document.onkeydown=function(e){var eventObj=e?e:window.event;alert(eventObj);}//]]></script></body></html>cs 키보드로 누른 키의 유니코드를 띄우려면 다음과 같이 하면 된다.
1234567891011121314151617<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head><title> new document </title><meta http-equiv="content-type" content="text/html;charset=utf-8" /></head><body><script type="text/javascript">//<![CDATA[document.onkeydown=function(e){var eventObj=e?e:window.event;alert(eventObj.keyCode);}//]]></script></body></html>cs 이벤트 객체의 속성에는 여러가지가 존재하는데 그것은 W3C의 링크를 참조하자. (Ctrl+f로 event object를 검색한다.)
'Legacy > Web' 카테고리의 다른 글
a 태그 target (0) 2016.07.16 [Web] 페이지 이동 방법 (0) 2015.11.26 [Web] 웹 서버와 웹 어플리케이션 (0) 2015.08.26 [jQuery] 제이쿼리의 선택자 (0) 2015.07.14 [jQuery] 제이쿼리란 (1) 2015.07.14 [JavaScript] JavaScript Event Handler (0) 2015.07.13 [JavaScript] DOM(Document Object Model) (0) 2015.07.13 [JavaScript] BOM(Browser Object Model) (2) 2015.07.13 [JavaScript] 자바스크립트의 객체 (0) 2015.07.12 [JavaScript] 조건식에 논리형(Boolean)이 아닌 다른 형이 오는 경우 (0) 2015.07.11