생활 웹디자인

코스 전체목록

닫기

이벤트

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

이벤트(event)란

  • 일반적으로는 프로그래밍적으로 어떤 사건이 일어난 순간을 의미
  • 자바스크립에서의 이벤트란 브라우져에서 발생하는 사건들(클릭, 스크롤, 페이지전환 등등)
  • 이벤트가 발생했을 때 실행될 로직을 작성한다.
  • 이벤트는 태그에 기술하는 인라인(inline)방식과 리스너(Listener)방식이 있다.

예제

인라인 방식

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script type="text/javascript">
			function gogogo() {
				alert('push');
			}
		</script>
		<input type="button" value="push" onclick="gogogo()" />
	</body>
</html>

example2.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<select onchange="alert(this.value)">
			<option value="1">one</option>
			<option value="2">two</option>
			<option value="3">three</option>
		</select>
	</body>
</html>

리스너 방식

example3.html - (jsfiddlegithub)

  • addEventlistener는 하나의 엘리먼트에 여러개의 이벤트 핸들러를 걸수있다
  • 브라우저간의 호환성을 위해서 조건문을 사용했다. 이러한 기법을 크로스브라우징이라고 한다.
  • 이벤트 핸들러란 이벤트가 발생했을 때 실행될 로직을 의미한다.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<input type="text" id="test" />
		<script type="text/javascript">
			// id test인 텍스트 필드를 가져온다
			var test = document.getElementById('test');

			//이벤트 핸들러
			function testHandler() {
				alert('blur');
			}

			//attachEvent는 ie에서만 지원하기 때문에 attachEvent가 지원되는지 확인하기 위해서 조건문을 사용
                        //blur란 포커스가 텍스트 필드에서 벗어났을 때 발생하는 내장된 이벤트를 의미한다.        
			if (test.addEventListener)// W3C DOM
				test.addEventListener('blur', testHandler, false);
			else if (test.attachEvent)// IE DOM
				var r = test.attachEvent("on" + 'blur', testHandler);

			//이벤트 핸들러2
			function testHandler2() {
				alert('blur2');
			}

			if (test.addEventListener)// W3C DOM
				test.addEventListener('blur', testHandler2, false);
			else if (test.attachEvent)// IE DOM
				var r = test.attachEvent("on" + 'blur', testHandler2);

		</script>
	</body>
</html>

이벤트의 종류 (원문)

onAbort Image The loading of the image is cancelled.
onBlur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window The object in question loses focus (e.g. by clicking outside it or pressing the TAB key).
onChange FileUpload, Select, Text, TextArea The data in the form element is changed by the user.
onClick Button, Document, Checkbox, Link, Radio, Reset, Submit The object is clicked on.
onDblClick Document, Link The object is double-clicked on.
onDragDrop Window An icon is dragged and dropped into the browser.
onError Image, Window A JavaScript error occurs.
onFocus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window The object in question gains focus (e.g. by clicking on it or pressing the TAB key).
onKeyDown Document, Image, Link, TextArea The user presses a key.
onKeyPress Document, Image, Link, TextArea The user presses or holds down a key.
onKeyUp Document, Image, Link, TextArea The user releases a key.
onLoad Image, Window The whole page has finished loading.
onMouseDown Button, Document, Link The user presses a mouse button.
onMouseMove None The user moves the mouse.
onMouseOut Image, Link The user moves the mouse away from the object.
onMouseOver Image, Link The user moves the mouse over the object.
onMouseUp Button, Document, Link The user releases a mouse button.
onMove Window The user moves the browser window or frame.
onReset Form The user clicks the form's Reset button.
onResize Window The user resizes the browser window or frame.
onSelect Text, Textarea The user selects text within the field.
onSubmit Form The user clicks the form's Submit button.
onUnload Window The user leaves the page.

 

댓글

댓글 본문
  1. 할수있다
    리스너 방식에서
    타입이 텍스트말고 버튼을 클릭했을때 나타나게하려면 어떻게해야되나요,,?
    예제로하나올려주시면 감사하겠습니다^^
  2. 원러브
    좋은 자료 감사합니다.
    Event Dispatch 설명도 함께 넣으면 완벽할 것 같습니다.
  3. plusment
    onabort
    이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)

    onactivate
    개체가 활성화될 때 발생
    (태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)

    onafterprint
    문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생

    onafterupdate
    데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생(데이터 개체부분 참조)

    onbeforeactivate
    개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)

    onbeforecopy
    선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생

    onbeforecut
    선택 영역이 지워지기 바로 직전에 발생

    onbeforedeactivate
    부모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔 때 발생
    (activeElement는 개체를 지칭하는 예약어로도 쓰임)

    onbeforeeditfocus
    편집가능한 개체 내부에 포함된 개체가 편집활성화된 상태가 되거나 혹은 편집가능한 개체가 제어를 위해 선택될 때

    onbeforepaste
    시스템의 클립보드에서 문서로 붙여넣기 될 때 대상 개체에서 발생

    onbeforeprint
    문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생

    onbeforeunload
    페이지가 언로드되기 직전에 발생

    onbeforeupdate
    데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되기전에 발생 (데이터 개체부분 참조)

    onblur
    개체가 포커스를 잃었을 때

    onbounce
    마퀴태그에서 alernate상태에서 스크롤이 양 사이드에서 바운드될 때 발생

    oncellchange
    데이터 제공 개체에서 데이터가 변화할 때 발생

    onchange
    개체 혹은 선택영역의 내용이 바뀔 때 발생

    onclick
    개체위에서 마우스의 왼쪽 버튼을 누를 때 발생

    oncontextmenu
    클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생

    oncontrolselect
    사용자가 개체의 제어 영역을 만들 때 발생

    oncopy
    시스템의 클립보드에 선택영역 혹은 개체를 복사할 때 소스 개체로부터 발생

    oncut
    시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생

    ondataavailable
    비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할 때마다 정기적으로 발생

    ondatasetchanged
    데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될 때 발생

    ondatasetcomplete
    데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될 때 발생

    ondblclick
    사용자가 개체에 더블클릭 할때 발생

    ondeactivate
    모 문서에서 현재 개체에서 다른 개체로 activeElement가 변할 때 발생

    ondrag
    드래그 상태가 지속되는 동안 소스 객체로부터 발생

    ondragend
    드래그 상태가 끝날 때 소스 객체로부터 발생

    ondragenter
    사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역으로 이동할 때 타갯 개체에서 발생

    ondragleave
    사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역을 떠날 때 타갯 개체에서 발생

    ondragover
    사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역내에서 드래그할 때 계속적으로 타갯 개체에서 발생

    ondragstart
    선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생

    ondrop
    드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타갯 개체에 드롭되었을 때 타갯 개체에서 발생

    onerror
    개체가 로드되는 동안 발생하는 이벤트

    onerrorupdate
    데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할 때 데이터 영역 개체에서 발생

    onfilterchange
    비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 때 발생

    onfinish
    마퀴개체의 loop가 완료되었을 때 발생

    onfocus
    개체가 포커스를 받았을 때 발생

    onfocusin
    개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생

    onfocusout
    포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생

    onhelp
    브라우저가 활성화 되어 있는 동안 F1키를 눌렀을 때

    onkeydown
    사용자가 키를 눌렀을 때

    onkeypress
    기능키를 제외한 키를 눌렀을 때 발생

    onkeyup
    사용자가 키를 놓았을 때 발생

    onlayoutcomplete
    소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때 현제 LayoutRect 개체를 모두 채우는 것이 끝났을 때 발생

    onload
    브라우저가 개체를 로드한 후에 발생

    onlosecapture
    개체가 마우스 캡쳐를 잃었을 때 발생

    onmousedown
    개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든)

    onmouseenter
    개체 안으로 마우스 포인터가 들어올 때 발생

    onmouseleave
    개체의 경계밖으로 마우스 포인터가 이동할 때 발생

    onmousemove
    개체위에서 마우스가 움직일 때 발생

    onmouseout
    개체밖으로 마우스 포인터가 빠져나갈 때 발생

    onmouseover
    개체위로 마우스 포인터가 들어올 때 발생

    onmouseup
    마우스가 개체위에 있는 동안 마우스를 누른 상태에서 해제될 때 발생

    onmousewheel
    마우스 휠이 돌아갈 때 발생

    onmove
    개체가 움직일 때 발생

    onmoveend
    개체가 움직임이 끝날 때 발생

    onmovestart
    개체가 움직이기 시작할 때 발생

    onpaste
    문서에 클립보드로부터 데이터가 전송될 때 타겟 개체에서 발생

    onpropertychange
    개체의 속성이 바뀔 때 발생

    onreadystatechange
    개체의 상태가 변화할 때 발생

    onreset
    Form 을 사용자가 리셋할 경우 발생

    onresize
    개체의 크기가 바뀔 때 발생

    onresizeend
    제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생

    onresizestart
    제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생

    onrowenter
    데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생

    onrowexit
    데이터 소스 콘트롤이 개체 내의 현재 열을 변화시킬 때 발생

    onrowsdelete
    레코드셋에서 열이 삭제될 때 발생

    onrowsinserted
    현재 레코드셋에 새로운 열이 추가된 후에 발생 (데이터 개체에서)

    onscroll
    사용자가 개체 내의 스크롤 바를 스크롤할 때 발생

    onselect
    현재 선택된 영역이 바뀔 때 발생

    onselectionchange
    문서의 선택 영역의 상태가 바뀔 때 발생

    onselectstart
    개체가 선택되기 시작할 때 발생

    onstart
    마퀴개체에서 루프가 매번 시작될 때 발생

    onstop
    사용자가 stop 버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생

    onsubmit
    폼이 전송되기 직전에 발생

    onunload
    개체가 언로드되기 직전에 발생
    [출처] javascript 이벤트 핸들러 종류|작성자 스위스여행
  4. nosugarinmycoffee
    혹시 리스너 방식에 대해서 '보충수업'될만한 자료가 있으시면 알려주세요~
    대화보기
    • nosugarinmycoffee
      저도 그렇네요... 눈 반짝이고 봐야겠어요.
      대화보기
      • lycso9_0217@naver.com
        인라인 방식과 리스너방식의 구분이 정확히 이해가 안가네요 ㅠㅠ
      • marin
        잘 들엇어요
      • 구글맵레드닷맨
        blur 는 focus click 등의 이벤트 이름들 중 하나 아닌가요?
        blur 를 쓴 이유는 커서가 빠질 때 반응하는 기능을 가지고 있어서 쓴 것이고요.
        대화보기
        • adepter
          좋은강의 감사드립니다 꾸준히 열심히 봐야 겠네요 ^^*
        • adepter
          저만 어려운게 아니군요 리스너;;;
        • zxcvxr
          일단....어려우니깐... 통과!! ㅎㅎㅎ
        • ahnphoto
          점점 어려워 지네요...
        • grAYHaT
          javascript로 회원가입 유효성 검사하는 폼을 만들어봤는데
          submit 버튼을 눌렀는데도 불구하고 event listener가 실행이 안되네요;;
          어떻게 해야할지 알려주세요
          grayhat.besaba.com/Javascript/Join_Form.html
        • Lee, Junghoon
          어렵당..
        • 굵은감자
          저도 그래요... 급 헛갈리기 시작했어요...
          대화보기
          • 굵은감자
            리스너는 겁나 어렵군요...
          • Leemh
            자바스크립트 관련 책보고 이해했습니다!고맙습니다 좋은 강의 해주셔서^^
          • Leemh
            리스너 방식 동영상에서 addEventListener('blur', eventListener, false)여기서이벤트 이름을 왜 blur로 했는지 이해가 안되네요;;
          • 아빠별
            좋은 강의 감사드립니다..var r = test.attachEvent("on" d+ 'blur', testHandler); 에서왜 변수 r 에 넣으셨나요???
          • Lee_woo
            아무것도 모르던상태, 이 동영상강좌만가지고 공부한 학생입니다. 리스너부분은 지금까지본 다른영상 강좌들에 비해 난이도가 급 높아진 느낌이라 이해가 안가네요.. 저만그런가요??
          • waterish
            감사합니다. 감사합니다.
          • hcpark79
            리스너 방식 어려워요~~~ ㅠ.ㅠ
          • bluesky
            앗 F5키로 리로드 했더니만 8분짜리 동영상으로 바뀌었네요..
            대화보기
            • bluesky
              리스너 방식 동영상이 2분짜리 동영상으로 설명중간에 그냥 끝나고 마네요. 아마도 동영상 편집과정에 누락된것 같읍니다.
            • egoing
              처리 했습니다. 고맙습니다.누렁이님!
              대화보기
              • 누렁이
                리스너 방식을 설명하는 동영상이 예제(example2.html) 사이로 잘못 끼어 들어갔습니다.
              • 손님
                addEventListener에 들어간 'blur'는 이벤트 종류를 말하는거 아닌가요? 이벤트종류가 아닌 다른걸 쓰셔서 그런것 같네요.
                대화보기
                • Seonggwan Lee
                  addEventListener 의 'blur'를 'blur2' 나 'bbb' 다른 string으로 바꾸니,handler가 실행되지 않네요;;;;
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기