●Event
▷사용자의 행동. 이에 반응하여 다른 함수를 호출할 수 있다.
▶Event handler
▷Event에 반응하여 호출되는 function
▷Event에 Event handler 추가: registering an event handler - addEventListener
▷Event에 Event ganlder 제거: removeEventListener
▶Event registering
▶Inline model
▷HTML코드에서 이벤트 함수 설정
▷대부분의 event 앞에 on이 붙음. (onload, onfocus...)
▷ex) <body onload = "start()"> / document.onload = "start()";
▶Object.addEventListener ( 이벤트 타입, 실행할 이벤트 리스너, 이벤트 전파 방식 )
▷해당 객체에 이벤트 리스너를 전달함.
▷이벤트 타입: 이벤트 리스너에 등록할 이벤트를 문자열로 전달.
▷load, ended, click, mouseover, mouseout...
▷이벤트 타입들: developer.mozilla.org/en-US/docs/Web/Events
▷실행할 이벤트 리스너: 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너 전달. (ex) 함수명)
▷이벤트 전파 방식: false면 버블링, true면 캡쳐링
▷버블링: 이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파
▷캡쳐링: 이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면 전파
▶Event Bubbling
▷Event가 일어나면,
▷해당 element의 Event handler가 먼저 호출되고,
▷부모의 Event handler가 호출됨.
▷cancelBubble을 통해 bubbling을 취소할 수 있음.
○Event 종류
▷www.w3schools.com/js/js_events_examples.asp
▶load
▷해당 element가 load될 때
▶mousemove
▷마우스가 해당 element위에서 움직일 때
▶mouseover
▷마우스가 해당 element에 진입할 때
▶mouseout
▷마우스가 해당 element에서 나갈 때
▶focus
▷해당 element가 focus를 얻었을 때 (Tab키 or Click을 통해)
▶blur
▷해당 element가 focus를 잃었을 때
▶submit
▷submit할때 (input에서 type = "submit"인 버튼)
▶reset
▷reset할때 (input에서 type = "reset"인 버튼)
○Event Object (이벤트 객체)
▷Event handler 함수가 jQuery에서 콜백될 때, 이벤트 객체를 함수의 인자로 전달함.
▷이벤트의 특성을 결정하거나, 기본 동작을 막을 수 있음.
▶메서드, 내부 변수
▷pageX : 브라우저 화면을 기준으로 한 마우스 X 좌표 위치
▷pageY : 브라우저 화면을 기준으로 한 마우스 Y 좌표 위치
▷preventDefault() : 기본 이벤트를 제거합니다.
▷stopPropagation() : 이벤트 전달을 제거합니다.
'컴퓨터 언어 > JS' 카테고리의 다른 글
| HTML DOM (0) | 2020.10.28 |
|---|---|
| JSON (0) | 2020.10.28 |
| Cookie, Web Storage (0) | 2020.10.27 |
| Object - Method, Member function (0) | 2020.10.18 |
| Array (0) | 2020.10.18 |