이벤트란?
웹페이지에서 마우스를 클릭했을 때,
키를 입력했을 때,
특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
이벤트가 발생하면 그에 맞는 반응을 하여야 하므로 이벤트는 일반적으로 함수에 연결
함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다.
- 지정된 event target(html 요소)에
- 지정된 event type(클릭이나 스크롤 등)이 발생하면
- 지정된 event handler(함수)가 실행된다.
이벤트 종류
1) 마우스 이벤트
| 이벤트 | 설명 |
| click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
| dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
| mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
| mouseout | 요소에 마우스를 아웃했을 때 이벤트가 발생 |
| mousedown | 요소에 마우스를 눌렀을 때 이벤트가 발생 |
| mouseup | 요소에 마우스를 떼었을 때 이벤트가 발생 |
| mousemove | 요소에 마우스를 움직였을 때 이벤트가 발생 |
| contextmenu | context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 |
2) 키 이벤트
| 이벤트 | 설명 |
| keydown | 키를 눌렀을 때 이벤트가 발생 |
| keyup | 키를 떼었을 때 이벤트가 발생 |
| keypress | 키를 누른 상태에서 이벤트가 발생 |
3) 폼 이벤트
| 이벤트 | 설명 |
| focus | 요소에 포커스가 이동되었을 때 이벤트 발생 |
| blur | 요소에 포커스가 벗어났을 때 이벤트 발생 |
| change | 요소에 값이 변경 되었을 때 이벤트 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트 발생 |
| reset | reset 버튼을 눌렀을 때 이벤트 발생 |
| select | input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 |
4) 로드 및 기타 이벤트
| 이벤트 | 설명 |
| load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
| abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
| unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
| resize | 요소에 사이즈가 변경되었을 때 이벤트 발생 |
| scroll | 스크롤바를 움직였을 때 이벤트 발생 |
| 이벤트 | 설명 |
| cut | 콘텐츠를 잘라내기할 때 이벤트 발생 |
| copy | 콘텐츠를 복사할 때 이벤트 발생 |
| paste | 콘텐츠를 붙여넣기할 때 이벤트 발생 |
이벤트 관련 용어
event target: 이벤트가 일어날 객체(button, h3, label)
event type: 이벤트 종류(click, scroll, mousemove)
event handler : 이벤트가 발생했을 때 동작할 코드의 집합
이벤트 모델 종류
1. 고전 이벤트 모델
=> btn.onclick = function(){}
2. 인라인 이벤트 모델
=> <button onclick='함수();'></button>
<script>....</script>
3. 표준 이벤트 모델
=> addEventListener
1) 고전이벤트 모델(기본이벤트모델)
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록,
이벤트 핸들러를 연결하는 방식(==익명함수 대입)
[표현법]
요소객체.(이벤트)속성명 = function(){};
요소객체의 (이벤트 종류) 속성에
해당 이벤트가 발생했을 때 동작할 이벤트핸들러를 대입하는 형식
=> null 대입시 이벤트가 제거됨
인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식
<button id ="btn1">실행확인</button>
<button id ="btn2">실행확인2</button>
<div id="area1" class="area"></div>
<script>
// var area1 = document.getElementById('area1');
// // 버튼 요소객체를 가져오기
// var btn1 = document.getElementById('btn1');
// btn1.onclick = function(){ // 이벤트헨들러
// area1.innerHTML += 'btn1이 클릭<br>';
// }
document.getElementById('btn1').onclick = function(){
area1.innerHTML += 'btn1이 클릭<br>';
console.dir(document.getElementById('btn1'));
// btn1이 가지고 있는 속성 onclick:ƒ ()
};
document.getElementById('btn2').onclick = function(){
// btn2가 클릭되면서 btn1의 이벤트를 제거
// f()형 onclick에 null 대입시 이벤트가 제거됨
document.getElementById('btn1').onclick=null;
// 이벤트 제거
area1.innerHTML += 'btn2를 클릭하여 btn1이벤트 제거<br>';
// 2번을 누른후 1번버튼을 누르면 더이상 이벤트가 발생하지 않음! 신기하다..
}
</script>2) 인라인 이벤트 모델
요소 내부에 직접적으로 이벤트 속성을 제시하여 실행 내용을 정의하는 방식
이벤트를 이벤트 대상의 태그 속성으로 지정
<div id="area2" class="area"></div>
<button onclick="document.getElementById('area2').innerHTML +='버튼클릭<br>';">실행확인</button>
<!-- 요소 내부에 직접적으로 이벤트를 기술하면 실행에는 문제가 없지만
한줄의 내용이 길어지고 복잡하여 잘 사용하지 않음 -->
<div id="area3" class="area"></div>
<button onclick="test1();">실행확인</button>
<script>
function test1(){
document.getElementById('area3').innerHTML +='두 번째 버튼 클릭 <br>';
}
</script>3) 표준이벤트 모델(addEventListner)
addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있음
[표현법]
이벤트를 발생시킬 요소객체.addEventListner('이벤트명',이벤트핸들러=>익명함수);
addEventListner는 모든 요소객체가 가지고 있는 함수(메소드)이며
매개변수로 이벤트명, 이벤트핸들러를 받고
해당 이벤트 발생시 이벤트핸들러를 실행시킨 결과를 리턴한다 <script>
var btn3 = document.getElementById('btn3');
// document.getElementById('btn3').addEventListner('이벤트명', 익명함수);
btn3.addEventListener('click', function(){
alert('표준이벤트모델테스트');
});
//
// mouseenter: 버튼 안으로 포인터가 들어가는 순간
btn3.addEventListener('mouseenter',function(){
btn3.style.backgroundColor ='green';
} )
// 내가 준 속성이 인라인으로 들어감(대입)
// mouseout: 버튼밖으로 포인터가 빠져나가는 순간
btn3.addEventListener('mouseout', function(){
btn3.style.background = 'yellow';
})
</script>현재 이벤트가 발생한 해당 요소객체(타겟)에 접근하는 방법
이벤트가 발생한 요소 또는 이벤트를 트리거한 요소
이벤트가 일어날 객체
window.event.target
= e.target
= this
1) 고전이벤트방식
<script>
// 고전이벤트방식
document.getElementById('btn4').onclick = function(e){
// 이벤트 종류를 알 수 있는 방법
// 방법1)
console.log(window.event);
// PointerEvent, MouseEvent객체
// 마우스를 이용한 이벤트발생시 발생하는 이벤트
// 방법2)
console.log(e);
//PointerEvent
// 이벤트 발생시 내부적으로 매개변수 전달
// window.event랑 함수의 매개변수로 무언가를 전달하는 것은 같음
// 이벤트 종류로부터 target속성값 가져오기
console.log(window.event.target); // <button id="btn4">고전 이벤트 방식</button>
console.log(e.target); // <button id="btn4">고전 이벤트 방식</button>
console.log(this); //<button id="btn4">고전 이벤트 방식</button>
// 현재 이벤트가 발생한 요소객체를 가져오고자 한다면
// this 전달시 자기자신이 속해있는 요소객체가 반환됨
//this: 요소객체 자기자신(이벤트를 실행한 주체) 반환!!!
// window.event.target = e.target = this
window.event.target.style.background ='red';
e.target.innerHTML = '버튼클릭';
this.style.color ='white';
};2) 표준이벤트 방식
// 표준이벤트방식
document.getElementById('btn5').addEventListener('click',function(e){
//window.event.target == e.target (매개변수 필요) == this
console.log(e);
window.event.target.style.background = 'black';
e.target.innerHTML +='이벤트발생';
this.style.color = 'white';
}
);3) 인라인이벤트 방식
//인라인 이벤트 방식
function test2(e){
console.log(window.event.target);
console.log(e.target);
// 11_이벤트.html:164 Uncaught TypeError: Cannot read properties of undefined (reading 'target')
// e가 정의되어있지 않아서 (매개변수로 안넣어줘서 읽을 수 없음)
// 선언적 함수에서 this는 나 자신이 아니라 window객체를 가리킴
console.log(this);
};
// 왜..?
function test3(아무거나){
// 함수 호출시 이벤트가 발생한 요소를 console창에 찍어야함
console.log(document.getElementById('btn7'));
console.log(아무거나);
} ;
</script> <form action="test.do">
<h3>유효성검사 회원가입양식</h3>
아이디: <input type="text" name="userId" id="userId" value=""><br>
비밀번호: <input type="password" name="userPwd" id="userPwd"><br>
비밀번호 확인: <input type="password" name="userPwd2" id="userPwd2"><br>
<input type="submit" onclick=" return validate();" value="회원가입">
</form>
<script>
function validate(){
// var userId = document.getElementById('userId').value;
// ///[1] 일반
// // 1. 글자수 검사
// if (userId.length >= 5 && userId.length <=12){ // 글자수가 적합햇을 경우
// //2. 숫자판단
// for(var i=0; i<userId.length; i++){
// if(userId.charAt(i)>=0 && userId.charAt(i) < 10 // 숫자판단)
// // 영문판단
// ||userId.charAt(i) >= 'a'&& userId.charAt(i) <'z'//영문소문자 판단
// ||userId.charAt(i) >= 'A'&& userId.charAt(i) <'Z'//영문소문자 판단
// }
// 정규표현식으로 간단하게 유효성 검사
var regExp= /^[a-zA-Z0-9]{5,12}$/; // 정규표현식 객체
// 패턴을 만족하는지 검사=> 정규표현식 객체에서 제공하는 test()메소드 이용
if(!regExp.test(userId)){
alert('유효한 아이디가 아닙니다. 다시 입력하세요');
document.getElementById('userId').select();
return false;
}
// 비밀번호에 대한 유효성 검사
// 비밀번화와 확인 비밀번호가 일치하늕
if(document.getElementById('userPwd').value!=document.getElementById('userPwd2').value){
alert('비밀번호 다름');
return false;
}
return true;
}
</script>
References
https://jenny-daru.tistory.com/17
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결
이벤트 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 이벤트의 종류 1) 마우스 이벤트 이벤트 설명 click 요소에 마우
jenny-daru.tistory.com
[JS] 📚 자바스크립트 이벤트 💯 총 정리
이벤트(event) 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다.
inpa.tistory.com
'JavaScript' 카테고리의 다른 글
| [jQuery] jQuery선택자 (0) | 2022.11.01 |
|---|---|
| [JavaScript] 객체2: 객체의 메소드 참조/ 객체내 속성호출(this) in, with / toString메소드 (1) | 2022.10.31 |
| [JavaScript] 객체1: 객체란 / 프로퍼티, 메소드/ 반복문 (0) | 2022.10.26 |
| [JavaScript] 함수 (0) | 2022.10.25 |
| [JavaScript] 배열 (0) | 2022.10.25 |