혁신을 이룹니다, 오딘박스(OdinBOX)

언제나 어디서나 오딘박스와 함께!

11-11, 클라이언트사이드프로그래밍

간지뽕빨리턴님 2019. 11. 25. 14:59
반응형
  클라이언트사이드

이벤트(event)

-> 이벤트가 발생하면 원하는 JavaScript 코드를 실행되도록 할 수 있음.

[자바 스크립트는 Jquery를 위해서 배웠다 ]

 

이벤트?

사용자가 웹브라우저에서 하는 모든 행위를 상세하게 구분하여 이벤트로 규정

(마우스클릭)

onmousedown

onmouseup

onclick

ondblclick

 

(마우스이동)

onmouseover

onmouseout등등

 

(키보드누르기)

onkeydown

onkeyup

onkeypress

 

폼(form) 입력(input)

onblur

onfocus

onfocusin

onfocusout

onsubmit

onchange

 

윈도우 조작

onresize

onscroll

onload

onunload

등등

이벤트 속성은 전부 소문자로 처리한다.

 

사용자의 행위가 아닌 시스템도 필요하면 이벤트를 발생시킬 수 있음

 

이벤트 모델

이벤트 관련 용어 정리

onload - 이벤트 속성 ( Event Property )

load  - 이벤트 이름 ( Event Name )

- 이벤트 타임 ( Event Type )

이벤트 속성에 저장되는 함수 

이벤트 리스너 ( Event Listener ) - 윈도우.언로드 사용해봄

이벤트 핸들러 ( Event Handler )

 

이벤트 모델 ( Event model ) - 자꾸 사용하고 용어를 익혀두자

-> 문서 객체의 이벤트 속성에 이벤트 핸들러를 연결하는 방법

 

인라인 이벤트 모델 ( inline event model )

- 태크 내부에 이벤트 처리 코드를 직접 코딩

<p onclick="alert('Clicked.');>text button</p>

->직관적이고 손쉬운 방법이긴 하나 긴 코드를 처리하기엔 부적합

html과 javascript 코드가 뒤섞여 유지 관리가 불편

 

고전 이벤트 모델

HTML과 독립적인 script 영역에서 태그의 이벤트 속성에 이벤트 핸들러 연결

<script>

let btn = socument.getElementById('button');

btn.onclick = function() { alert('clicked.');}

</script>

<body>

<p id = 'button'>text button</p>

</body>

= body와 script가 분리되어 유지 관리에 편리함

= 이벤트 핸들러를 하나만 연결할 수 있다.

-> 핸들러 하나만 사용 할 수 있는 것을 보완하기 위한 것이 표준 이벤트 모델이다

 

표준이벤트 모델

(가급적으로 표준 이벤트 모델을 사용하는 것이 좋음)

- 쳬계적이고 좀 더 익숙해지면 편함

이벤트 핸들러 연결 메소드를 이용하여 연결

 

 

 

속성 앞에 객체 이름이 와야하지만 윈도우 객체는 안와도 된다.