Event Handing
Event Handing
-
addEventListner
addEventListner() 메서드는 지정한 이벤트가 발생할때 설정한 함수를 호출
-
문법
document.addEventListener(event, function, useCapture);
event : 반응할 이벤트 유형
function : 이벤트가 발생할 때 실행할 함수
useCapture : eventTarget으로 전송하기 전, 등록된 function으로 타입의 이벤트 전송여부를 나타내는 불린값 ( 생략 가능 )
-
.innerText
html 태그를 해석하지 않고 텍스트를 그대로 출력함
-
.innerHTML
html 태그를 해석해서 출력해줌
-
.preventDefault
이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소함
-
.createElement
HTML 태그를 생성
documnet.createElement('br'); // br태그 생성
-
.toDataURL
이 메소드는 매개 변수에 저장된 형식(기본값은 PNG)의 이미지 표현이 포함된 데이터 URL를 반환함
canvas.toDataURL(type, encoderOptions);
-
type
기본 형식 유형은 image/png
-
encoderOptions
이미지 품질 표시(0 ~ 1)
기본값은 0.92
-
.href
- .download
Event
addEventListner
addEventListner() 메서드는 지정한 이벤트가 발생할때 설정한 함수를 호출
-
문법
document.addEventListener(event, function, useCapture);
event : 반응할 이벤트 유형
function : 이벤트가 발생할 때 실행할 함수
useCapture : eventTarget으로 전송하기 전, 등록된 function으로 타입의 이벤트 전송여부를 나타내는 불린값 ( 생략 가능 )
.innerText
html 태그를 해석하지 않고 텍스트를 그대로 출력함
.innerHTML
html 태그를 해석해서 출력해줌
.preventDefault
이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소함
.createElement
HTML 태그를 생성
documnet.createElement('br'); // br태그 생성
.toDataURL
이 메소드는 매개 변수에 저장된 형식(기본값은 PNG)의 이미지 표현이 포함된 데이터 URL를 반환함
canvas.toDataURL(type, encoderOptions);
type
기본 형식 유형은 image/png
encoderOptions
이미지 품질 표시(0 ~ 1)
기본값은 0.92
.href
자바스크립트 관련 event를 모아놓음
주기적으로 업데이트 예정
-
UI event
사용자가 웹페이지가 아닌 UI와 상호작용할 때 발생됨이벤트 설명 scroll 사용자가 페이지를 위아래로 스크롤 할 때 load 웹페이지의 로드가 완료되었을 때 unload 웹페이지가 언로드 될 때(새로운 페이지를 요청했을 때) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없을 때 resize 브라우저의 창 크기를 조정했을 때 -
키보드 이벤트
사용자가 키보드를 이용할 때 발생이벤트 설명 keyup 키를 땔 때 keydown 사용자가 키를 처음 눌렀을 때 keypress 사용자가 눌렀던 키의 문자가 입력되었을 때 -
포커스 이벤트
|이벤트|설명|
|-|-|
|focus|요소가 포커스를 얻었을 때|
|blur|요소가 포커스를 잃었을 때| -
폼 이벤트
|이벤트|설명|
|-|-|
|input|<input>,<textarea>
요소 값이 변경되었을 때|
|submit|사용자가 버튼키를 이용하여 폼을 제출할 때|
|reset|리셋 버튼을 클릭할 때|
|change|선택상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때|
|select|텍스트를 선택했을 때|
|copy|폼 필드의 콘텐츠를 복사했을 때|
|paste|폼 필드의 콘텐츠를 붙여넣을 때|
|cut|폼 필드의 콘텐츠를 잘라냈을 때| -
마우스 이벤트
|이벤트|설명|
|-|-|
|mouseup|눌렀던 마우스 버튼을 땔 때|
|mousedown|마우스를 누르고 있을 때|
|mousemove|마우스를 움직였을 때|
|mouseout|요소 바깥으로 마우스를 움직였을 때|
|mouseenter|마우스 포인터가 들어올 때|
|mouseleave|마우스 포인터가 벗어날 때|
|click|사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때|
|dbclick|두 번 눌렀다 땔 때|
|contextmenu|우클릭하면 나오는 팝업창 제어|
Author And Source
이 문제에 관하여(Event Handing), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kusdsuna/Event-Handing저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)