고전 이벤트 모델 : 특정 요소 객체를 가지고와서
해당 요소의 이벤트 속성에 접근한 후
이벤트 핸들러를 연결하는 방식
<button id="btn1">버튼1</button>
<button id="btn2">버튼2</button>
<div class="area" id="area1"></div>
<script>
const area1 = document.getElementById("area1");
document.getElementById("btn1").onclick = function() {
area1.innerHTML += "버튼1이 클릭되었습니다. <br>";
}
document.getElementById("btn2").onclick = function() {
area1.innerHTML += "버튼2가 클릭되었습니다. <br>";
document.getElementById("btn1").onclick = null;
}
</script>
id 속성인 btn1, btn2 요소의 onclick 이벤트 핸들러 연결
document.getElementById("btn1").onclick = null;
btn2 클릭시 버튼2가 클릭되었습니다 출력 후
#btn1 요소의 클릭 이벤트 핸들러 제거
인라인 이벤트 모델 :
요소 내부에 직접 이벤트 속성을 작성하여 실행할
내용을 정의하는 방식
주로 스크립트 내에 정의 되어 있는 함수를 호출하는 방식 내용이다
</p>
<button onclick=" document.getElementById('area2').innerHTML += '인라인 클릭1 <br>'; ">인라인1</button>
<button onclick="inlineClick();">인라인2</button>
<div class="area" id="area2"></div>
<script>
function inlineClick() {
document.getElementById('area2').innerHTML += '인라인 클릭2 <br>';
}
</script>
복잡해지고 관리가 하기 힘들어지므로
지양하는 방식이다
표준 이벤트 모델 :
w3c에서 공식적으로 지정한 이벤트 모델
ie에서 9버전부터 사용하기 시작
요소.addEventListener("이벤트명", 이벤트핸들러(함수));
<button id="btn3">표준 확인</button>
<script>
const btn3 = document.querySelector("#btn3");
btn3.addEventListener('click', function() {
alert("알림알림?");
});
btn3.addEventListener('mouseenter', function() {
btn3.style.background = 'plum';
});
btn3.addEventListener('mouseout', function() {
btn3.style.background = 'skyblue';
});
</script>
mouseenter :
마우스가 요소 내에 접근 시 이벤트가 발생한다
mouseout :
마우스가 요소 밖으로 나갔을 떄 배경색 변환
이벤트가 발생한 요소 객체에 접근하기 :
<h2>* 이벤트가 발생한 요소 객체에 접근하기 *</h2>
<button id="btn4">고전이벤트방식</button>
<button id="btn5">표준이벤트방식</button>
<!-- <button onclick=" this.style.background = 'red'; ">인라인이벤트방식</button> -->
<!-- <button onclick="changeBackground(this);">인라인이벤트방식</button> -->
<button onclick="changeBack(event);">인라인이벤트방식</button>
<script>
// 고전 이벤트 방식
document.getElementById("btn4").onclick = function(e) {
this.style.background = 'yellow';
}
// 표준 이벤트 방식
document.getElementById("btn5").addEventListener('click', function(event){
// document.getElementById("btn5").style.background = 'violet';
event.target.style.background = 'violet';
});
// 인라인 이벤트 방식
function changeBackground(target) {
target.style.background = 'red';
}
function changeBack(e) { // event 객체를 전달받는 방식
e.target.style.background = 'red';
}
</script>
태그별 기본적으로 가지고 있는 이벤트 제거 :
<a> 태그
기본적으로 이벤트를 가지고 있는 요소(태그)
- a 태그 : 클릭 시 href 속성을 통해 url을 요청(페이지 이동)
- form 태그 내 submit 버튼 :
버튼 클릭 시 사용자가 입력한 값들을 form태그의 action 속성을 통해
해당 url로 요청(제출)
태그 내의 기본적으로 설정된 이벤트가 실행되지 않게 막는 방법
: 이벤트 핸들러의 반환값을 false로 주면 이벤트가 동작되지 않는다
(return false)
하이퍼링크가 삽입이 되어있어도 해당 링크를 클릭시에도
return값이 false인 경우 해당 페이지로 갈 수 없다.
반환 값을 false를 준 예제 :
* alert : (알림창)
* prompt : 입력 받기(문자 입력창)
*confirm : 확인받기(확인/취소)
<script>
function test1() {
return confirm("갈거야?");
}
</script>
<form 태그> :
<h4>form 태그 테스트</h4>
<h3>회원가입 폼</h3>
<form action="login" method="get">
아이디 : <input type="text" name="userId" id="userId"> <br>
비밀번호 : <input type="password" name="userPwd" id="userPwd"> <br>
비밀번호 확인 : <input type="password" id="userPwdCheck"> <br>
<input type="submit" value="회원가입" onclick="return validate();">
</form>
<script>
HTML에서 form 태그의 method 속성은 폼 데이터를
서버에 전송하는 방법이다
get 특징 : 데이터 조회(Read-only) 요청 :
서버의 데이터나 웹페이지의 리소스를 조회하는 경우 get 메서드를 사용한다
예 검색 페이지, 제품 목록 페이지 등
아이디에 대한 유효성 검사 :
영문자 또는 숫자로만 5자 이상 12자 이하
if (id.length >= 5 && id.length <= 12) {
// 유효성 검사
for(let i=0; i<id.length; i++) {
const ch = id.charAt(i); // id[i]
if ( !(ch >= 'a' && ch <= 'z') // 소문자
&& !(ch >= 'A' && ch <= 'Z') // 대문자
&& !(ch >= '0' && ch <= '9') // 숫자
) {
alert("아이디는 영문자 또는 숫자로만 입력해야 합니다.");
return false;
}
}
} else {
// 아이디 값의 길이가 5보다 작거나 12보다 큰 경우
alert("아이디는 5자 이상 12자 이하로 입력해야 합니다.");
return false;
}
// * 비밀번호에 대한 유효성 검사 : 비밀번호, 비밀번호 확인의 값이 동일해야 함
const pwd = pwdEle.value;
const pwdCheck = pwdChkEle.value;
if (pwd != pwdCheck) {
alert("비밀번호와 비밀번호 확인에 입력된 값이 다릅니다.");
return false;
}
}