티스토리 뷰
이벤트
키보드가 입력되는것, 마우스가 클릭되는 것 등을 이벤트라고 한다. Javascript에서는 이벤트가 발생했을때에, 이를 처리할 수 있도록 어떤 함수가 호출되도록 지정할 수 있는데, 이때 호출되는 함수를 이벤트 핸들러라고 한다.
Javascript 이벤트 핸들러의 종류
마우스/키보드 뿐만 아니라 웹사이트를 사용할 때에 일어날 법한 사건에 대해서 이벤트 핸들러가 정의되어있다. 보통 이벤트의 이름 앞에 "on"을 붙여서 on~~~ 처럼 이름이 붙은 경우가 많다.
아래는 javascript 이벤트 핸들러 중 몇가지를 가져온 것이다.
- onclick: 마우스 버튼이 눌렸다 떼어질 때 실행된다.
- onkeydown: 키가 눌렸을 때 실행된다.
- onmouseover: 마우스가 엘리먼트 위로 이동할 때 실행된다.
- onresize: 윈도우 크기가 변경될 경우 실행된다.
- onselect: 텍스트가 선택됐을 때 실행된다.
- onload: 문서 로딩이 완료됐을 때 실행된다.
마우스, 키보드 관련 이벤트핸들러.
1)마우스
- onmousemove
마우스가 이동시 호출 - onclick : 마우스 버튼이 눌렸다 떼어질 때 실행된다.
mouseup 이벤트가 이어서 발생한다. 기본 동작 방식을 취소하려면 false를 반환한다.- onmousedown: 마우스 버튼 눌렸을 때 호출
- onmouseup: 마우스 버튼에서 손을 뗐을 때 호출
- ondblclick
마우스 더블클릭시 호출 - onmouseover
마우스가 엘리먼트 위로 이동시 호출 - onmouseout
마우스가 엘리먼트에서 벗어났을때 호출
2)키보드
- onkeypress: 키가 눌렸을 때 실행된다.
keydown 이벤트가 이어서 발생한다. 취소하려면 false를 반환한다.- onkeydown: 키가 눌렸을 때 실행된다. 취소하려면 false를 반환한다.
- onkeyup: 키에서 손을 뗐을 때 실행된다. keypress 이벤트가 이어서 발생한다.
이벤트 핸들러
HTML 속성 형태의 이벤트 핸들러
onlclick="함수"에서 함수에 해당하는 부분이 onlclick 이벤트가 발생하면 실행될 함수이다.
onclick(마우스 버튼이 눌렸다 떼어질 때), onsubmit(폼 제출이 요청됐을 때), onload(문서 로딩이 완료됐을 때) 이 모두 이벤트이다.
<input type="button" value="Press Me" onclick="alert('thanks');">
<form action="processform.action" onsubmit="return validateForm();">
<body onload="startApp()">프로퍼티 형태의 이벤트 핸들러
HTML 속성으로 썼던 것을 Javascript로 나타낸 것이다. HTML Element의 onclick 속성에 원하는 함수를 지정하는 식이다.
//1
document.getElementById('button1').onclick = function(){alert('thanks');};
//2
function startApp(){...}
document.onload = startApp;참고 - this
(이벤트 핸들러를 HTML속성으로 정의하든 자바스크립트 프로퍼티로 정의하든 같음)
document 엘리먼트에 이벤트핸들러를 새로운 메서드로 정의하는 것이다.
함수(이벤트핸들러)를 document 엘리먼트의 프로퍼티로 할당하는 셈이다.
이벤트 핸들러가 호출되면 이벤트가 발생한 엘리먼트의 메서드로서 해당 이벤트 핸들러가 호출되고,
따라서 this 키워드는 대상 엘리먼트를 가리킨다.
반응형
'Programming > Web' 카테고리의 다른 글
| Git기반의 CMS로 정적사이트에 글쓰기 에디터 달기 (0) | 2023.11.03 |
|---|---|
| Vercel을 활용한 Next.js블로그 배포 (0) | 2023.01.28 |
| [BoC:React]간단한 Accordion (0) | 2019.08.19 |
| [BoC:js] 벽에 공 튕기기 (0) | 2019.08.17 |
| backtick(`)문자와 javascript 템플릿 리터럴 (2) | 2019.07.09 |
댓글