1. 이벤트(event)
이벤트란 어떤 사건을 의미한다.
브라우저에서의 사건이란, 사용자가 클릭 했을 '때', 스크롤 했을 '때', 필드의 내용을 바꾸었을 '때' 등을 의미한다.
https://developer.mozilla.org/en-US/docs/Web/Events
Event reference | MDN
Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events
developer.mozilla.org
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="alert" onclick="alert(window.location);">
<!--
onlick : 사용자가 버튼을 클릭했을 '때' 실행
event target : 이벤트가 일어날 객체를 의미한다. 여기서는 버튼 태그에 대한 객체가 타겟
event type : 이벤트의 종류를 의미한다. click이 이벤트 타입
event handler : 이벤트가 발생했을 때 동작하는 코드를 의미한다.
여기서는 alert(window.location)이 해당된다.
-->
</body>
</html>
[출력 결과]
1-1. 인라인(inline) 방식
인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>10 + 50 = <span id="question"> ? </span> </h1>
<input type="button" value="결과보기"
onclick="printResult();">
<script>
// 결과보기 버튼 클릭시, 10 + 50의 결과 값을 '?' 안에 넣어줄것
function printResult() {
let result = sum(10, 50);
// id로 접근
let mytag = document.getElementById("question");
mytag.innerHTML = result;
}
function sum(x, y){
return x + y;
}
</script>
</body>
</html>
[출력 결과]
1-2. 자기 자신 참조하기
- 방법 1 : getElement~로 참조하기. 따로 지정될 id나 class 등을 명시해야 해서 불편하다.
- 방법2 : this로 참조하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 자기 자신을 참조하는 불편한 방법 -->
<input type="button" id="target"
onclick="alert('event_1 : ' + document.getElementById('target').value);"
value="button"/>
<!-- this를 통해서 간편하게 참조하는 방식 -->
<!-- 이벤트가 발생한 대상을 필요로 하는 경우, this를 통해서 참조할 수 있다 -->
<input type="button"
onclick="alert('event_1 : ' + this.value);"
value="button">
</body>
</html>
[출력 결과]
▶ 두 개의 버튼 모두 방법은 다르지만 동일한 결과를 출력한다.
1-3. 프로퍼티 리스너
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
인라인 방식에 비해서 HTML과 Javascript를 분리할 수 있다는 점에서 선호되는 방식이지만, 뒤에서 배울 addEventListener 방식을 추천한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.onclick = function(){
alert('Hello world');
}
</script>
</body>
</html>
[출력 결과]
function()에 보통 파라미터로 event를 넣는다.
이것을 console.log(event)로 출력해 봄으로써 이벤트가 발생할 때의 정보 확인이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.onclick = function(event){
alert('Hello world : ');
console.log(event);
}
</script>
</body>
</html>
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.onclick = function(event){
alert('Hello world : ' + param.target.value);
}
</script>
</body>
</html>
[출력 결과]
1-4. addEventListner()
이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다.
▶ 이벤트 핸들러란?
"어떠한 사건에 대한 동작을 다룬다"는 의미
"마우스가 버튼에 닿았을 때"는 사건(Action)
"마우스가 버튼에 닿으면 버튼 색이 파란색으로 변한다"는 사건에 대한 동작
이 두 개를 묵은 것이 이벤트 핸들러이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.addEventListener('click',function(){
alert('Hello world!!!');
});
</script>
</body>
</html>
[출력 결과]
1-5. 이벤트 함수 실행하기
[예제 코드 1]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target1" value="button1">
<script>
let t1 = document.getElementById('target1');
function btn_listener(event){
alert("button 클릭! : " + event.target.id);
}
t1.addEventListener('click', btn_listener );
</script>
</body>
</html>
▶ gtn_listner 함수 뒤 괄호()는 써주지 않아도 된다.
[출력 결과 1]
[예제 코드 2]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target1" value="button1"/>
<input type="button" id="target2" value="button2"/>
<script>
function btn_listener(event){
switch (event.target.id) {
case 'target1':
alert("target1 클릭!!");
break;
case 'target2':
alert("target2 클릭!!");
break;
}
}
let t1 = document.getElementById("target1");
let t2 = document.getElementById("target2");
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
</script>
</body>
</html>
▶ addEventListener 방식으로 클릭 이벤트 등록
▶ btn_listener 실행 및 내부 분기처리
▶ target1 클릭 시 -> alert(target1 클릭!!);
▶ target2 클릭 시 -> alert(target2 클릭!!);
[출력 결과 2]
1-6. property 방식과 listner 방식 비교
action(), action2() 함수를 각각 property 방식과 listner방식으로 실행해 봄으로써 차이점을 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="target1" value="property">
<input type="button" id="target2" value="listener">
<script>
function action(){
alert('click!!');
}
function action2(){
alert('클릭!!');
}
// property
document.getElementById("target1").onclick = function(){
action();
}
document.getElementById("target1").onclick = function(){
action2();
}
// listener
document.getElementById('target2').addEventListener('click',action);
document.getElementById('target2').addEventListener('click',action2);
</script>
</body>
</html>
[출력 결과 1]
▶ property 방식은 마지막 action2()만 동작하는 것을 볼 수 있고
▶ listner 방식은 action()과 action2()가 차례로 동작하는 것을 볼 수 있다.
▶ properety 방식은 일종의 덮어쓰기로 마지막 함수만 호출이 되고, listner방식은 add 해줌으로써 두 함수가 차례로 동작한다.
add되어 있는 이벤트는 remove도 가능하다.
document.getElementById('target2').removeEventListener('click',action);
▶ action2() 이벤트는 지워지고 action()만 실행되어 'listner' 버튼을 누르면 alert('click!!')만 뜬다.
1-7. 기본 동작의 취소
웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.
기본 동작에 대한 기본 이벤트들을 취소할 수 있다.
[예제 코드 - 기본 이벤트 작성]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
<label>prevent event on</label>
<input type="checkbox" id="prevent">
</p>
<p>
<a href="http://www.naver.com">naver</a>
</p>
<form action="http://www.naver.com">
<input type="submit">
</form>
</body>
</html>
[출력 결과]
▶ 체크박스 클릭 여부에 상관없이 링크 또는 submit 버튼을 클릭하면 연결된 링크(네이버)로 이동한다.
[예제 코드 - 체크박스 체크 시 링크와 submit 제출 이벤트 취소 - 인라인 방식]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
<label>prevent event on</label>
<input type="checkbox" id="prevent">
</p>
<!-- inline 방식 -->
<!--
checked : true -> 체크가 되어 있는 상태
: false -> 체크가 되어 있지 않은 상태
-->
<p>
<a href="http://www.naver.com"
onclick="if(document.getElementById('prevent').checked) return false;">
naver</a>
</p>
<form action="http://www.naver.com"
onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit">
</form>
</body>
</html>
[출력 결과]
▶ 체크박스가 체크되어 있으면 "document.getElementById('prevent').checked"가 ture가 되어 if문이 실행되고 false가 리턴됨으로써 이벤트가 실행되지 않는다.
[예제 코드 - 체크박스 체크 시 링크와 submit 제출 이벤트 취소 - property 방식(onclick)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
<label>prevent event on</label>
<input type="checkbox" id="prevent">
</p>
<p>
<a href="http://www.naver.com" id="select">naver</a>
</p>
<form action="http://www.naver.com" id="sel2">
<input type="submit">
</form>
<script>
document.getElementById('sel1').onclick = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
document.getElementById('sel2').onclick = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
</script>
</body>
</html>
[예제 코드 - 체크박스 체크 시 링크와 submit 제출 이벤트 취소 - addEventListner 방식(click / submit)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
<label>prevent event on</label>
<input type="checkbox" id="prevent">
</p>
<p>
<a href="http://www.naver.com" id="sel1">naver</a>
</p>
<form action="http://www.naver.com" id="sel2">
<input type="submit">
</form>
<script>
// click
document.getElementById('sel1').addEventListener('click',function(event){
if( document.getElementById('prevent').checked ){
event.preventDefault();
}
});
// submit
document.getElementById('sel2').addEventListener('submit',function(event){
if( document.getElementById('prevent').checked ){
event.preventDefault();
}
});
</script>
</body>
</html>
▶ event.preventDefault()를 호출하면 일반적으로 기존의 액션이 진행되지 않아 해당 이벤트가 발생하지 않는다.
1-8. change
폼 컨트롤의 값이 변경되었을 때 발생하는 이벤트
입력을 끝내고 focus를 빠져나왔을 때 발생한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="result"></p>
<input type="text" id="target">
<script>
let t = document.getElementById('target');
t.addEventListener('change',function(event){
document.getElementById('result').innerHTML = event.target.value;
});
</script>
</body>
</html>
[출력 결과]
1-9. focus, blur
- focus : 엘리먼트에 포커스가 생겼을 때
- blur : 포커스가 사라졌을 때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="target" />
<script>
let t = document.getElementById("target");
// blur
t.addEventListener('blur',function(){
console.log('blur');
});
// focus
t.addEventListener('focus',function(){
console.log('focus');
});
</script>
</body>
</html>
[출력 결과]
1-10. submit 전송 취소
submit : 폼 정보를 서버로 전송하는 명령어인 submit 시에 일어나고 form 태그에 적용된다.
아무것도 입력하지 않고 전송버튼을 눌렀을 때 submit 이벤트를 취소시키는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="result.html" id="target">
<label>
name : <input type="text" id="name">
<input type="submit">
</label>
</form>
<script>
let t = document.getElementById("target");
t.addEventListener('submit',function(event){
if( document.getElementById("name").value.length == 0 ){
alert("Name 필드의 값이 누락되었습니다.");
event.preventDefault();
}
});
</script>
</body>
</html>
[출력 결과]
▶ 빈 칸으로 제출하면 alert창 띄운 후 submit 전송 취소
▶ 내용을 적어 submit 전송시키면 result.html로 넘어가지만 현재 파일이 없기 때문에 파일에 액세스 할 수 없다고 뜬다
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
220518 jQuery 1 (0) | 2022.07.06 |
---|---|
220517 Javascript 11 (0) | 2022.06.23 |
220513 Javascript 9 (0) | 2022.06.23 |
220512 Javascript 8 (0) | 2022.06.22 |
220512 Javascript 7 (0) | 2022.06.22 |