Front/Js
JavaScript(이벤트, Event, 회원가입 유효성 검사, 정규표현식)
devel0per
2022. 9. 27. 14:56
이벤트(Event)
1. 이벤트 모델의 종류
- 고전 이벤트 모델
- 인라인 이벤트 모델
- 표준 이벤트 모델
1-1)고전 이벤트 모델
- 요소 객체를 가지고 와서 해당 요소객체에 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 이벤트를 제거할 수도 있음(이벤트 속성에 null값 대입)
- document.getElementById()를 활용해서 해당 요소객체에 이벤트 핸들러를 연결한다(document.getElementsByName.. 등 사용가능)
<!--요소 내부에 직접적으로 이벤트 속성을 기술하지 않는다-->
<button id="btn1">버튼1</button>
<button id="btn2">버튼1 이벤트 삭제</button>
<div id="area1" class="area"></div>
<script>
var area1 = document.getElementById("area1");
// var btn1 = document.getElementById("btn1");
// btn1.onclick = function(){
// }
document.getElementById("btn1").onclick = function(){ //버튼1을 클릭했을때 btn1이 클릭되었습니다 메세지 넣기
area1.innerHTML+="btn1이 클릭되었습니다. <br>";
}
document.getElementById("btn2").onclick=function(){ //버튼2를 클릭했을때 버튼1의 이벤트를 삭제하기
document.getElementById("btn1").onclick=null; // 이벤트 제거
}
document.getElementById("btn1").onmouseover=function(){
area1.style.backgroundColor="yellow";
}
document.getElementById("btn1").onclick = function(){
area1.innerHTML+="btn1이 클릭되었습니다람쥐. <br>";
}
</script>1-2)인라인 이벤트 모델
- 요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식 주로 script 태그에 정의되어 있는 함수를 호출하는 방식으로 사용한다.
<h3>인라인 이벤트 모델</h3>
<p>
요소내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식 <br>
주로 script 태그에 정의되어 있는 함수를 호출하는 방식으로 사용
</p>
<button onclick="test01();">확인</button>
<button onclick="document.getElementById('area2').innerHTML+='두번째 버튼 클릭 <br>';">2번확인</button>
<!--요소내부에 직접적으로 이벤트를 기술해도 되지만 구문이 길어지고 복잡하기때문에 사용하지 않음-->
<div id="area2" class="area"></div>
<script>
function test01(){
document.getElementById("area2").innerHTML+="첫번재 버튼 클릭 <br>";
}
</script>
1-3)표준 이벤트 모델(addEventListener)
- 이벤트를 걸고자하는 요소객체에 addEventListener("이벤트명", "이벤트핸들러")를 사용한다.
<h3>표준 이벤트 모델 (addEventListener)</h3>
<button id="btn3">확인</button>
<script>
var btn3 = document.getElementById("btn3");
//이벤트를 걸고자하는 요소객체.addEventListener("이벤트명","이벤트핸들러"); //j)이벤트핸들러는 함수 어떠하게 함수를 다룰지
btn3.addEventListener("click",function(){
alert("표준이벤트 모델 테스트");
});
//버튼 안으로 마우스포인터가 들어가는 순간 발생하는 이벤트 : mouseeenter
btn3.addEventListener("mouseenter",function(){
btn3.style.backgroundColor="red";
});
//버튼 밖으로 마우스포인터가 빠져나가는 순간 발생하는 이벤트 :mouseout
btn3.addEventListener("mouseout",function(){
btn3.style.backgroundColor="blue";
});
//마우스를 누르고 있을때
btn3.addEventListener("mousedown",function(){
btn3.style.backgroundColor="yellow";
});
btn3.addEventListener("click",function(){
alert("표준이벤트 모델 테스트22");
});
//-> 고전은 중복 x, 표준은 중복 O
</script>2. 현재 이벤트가 발생한 요소객체에 접근하는 방법
- 고전 이벤트 방식
- function(e) 이벤트 핸들러를 이용해서 이벤트 발생시 내부적으로 정보가 전달되게 만든다.
- 현재 이벤트가 발생한 요소객체를 가져오고자 한다면 window.event.target = e.target = this를 사용하면 된다.
- e = window.event; window.event라는 객체정보가 내부적으로 넘어가는데 그것을 매개변수로 담아서 넘기는 형태이다.
<h2>2.현재 이벤트가 발생한 요소객체에 접근하는 방법</h2>
<button id="btn4">고전이벤트방식</button>
<button onclick="test03(this);">버튼요소전달</button>
<script>
//고전 이벤트 방식
document.getElementById("btn4").onclick = function(e){ //이벤트 핸들러
// console.log(window.event); //이벤트 발생시 내부적으로 정보가 전달됨 (매개변수처럼)
// console.log(e);
//현재 이벤트가 발생한 요소객체를 가져오고자 한다면
// window.event.target = e.target = this
//e=window.event; window.event라는 객체정보가 내부적으로 넘어가는데 그것을 매개변수로 담아서 넘기는 형태
console.log(window.event.target);
console.log(e.target);
console.log(this);
window.event.target.style.backgroundColor="black";
e.target.innerHTML = "버튼클릭됨";
this.style.color = "white";
alert(this.id);
}- 표준 이벤트 모델 방식
<h2>2.현재 이벤트가 발생한 요소객체에 접근하는 방법</h2>
<button id="btn5">표준이벤트방식</button>
<button onclick="test03(this);">버튼요소전달</button>
<script>
//표준 이벤트 모델 방식
document.getElementById("btn5").addEventListener("click",function(e){
console.log(window.event.target);
console.log(e.target);
console.log(this);
});- 인라인 이벤트 모델 방식
- 인라인 방식은 태그내에서 직접 호출하기 때문에 호출시 매개변수를 같이 넣지 않는다.
- this가 window객체 정보를 가지고 있다
- 고전방식과 표준방식은 해당요소객체(버튼), 이벤트 호출이기떄문에 this로 버튼을 불러올수 있지만 일반 선언적 함수를 호출하는 인라인 이벤트 방식은 window.event.target만 가능하다.
function test02(){
console.log(window.event.target);
// console.log(e.target); //호출시 매개변수를 같이 넣지 않았기 때문 / 인라인방식은 태그내에서 직접 호출하기때문
console.log(this); //window객체정보를 갖고있음
//고전방식과 표준방식은 해당요소객체(버튼).이벤트 호출이기때문에 this로 버튼을 불러올수있지만
//일반 선언적 함수를 호출하는 인라인 이벤트 방식은 window.event.target만 가능하다
}
function test03(element){
// console.log(element);
element.innerHTML="this로 전달받음";
}3. 태그별 기본적으로 가지고 있는 이벤트 제거
기본적으로 이벤트를 가지고 있는요소
- <a> : 클릭시 href에 제시되어있는 url을 요청하는 기본이벤트 보유
- <form submit> : 클릭 시 사용자가 입력한 정보들을 action에 제시되어 있는 url에 제출하며 요청하는 이벤트
태그 내의 기본적인 설정값 이벤트를 제거하고자 한다면 이벤트 핸들러의 return값을 false로 리턴해주면 기본이벤트의 실행이 안된다.
- <a> 태그 이벤트 속성 없애기
<!--기본 이벤트가 있는 요소에 onclick속성을 부여하면 onclick이 우선적으로 실행된다-->
<a href="http://www.naver.com" onclick="alert('잠깐!'); return false;">네이버로 이동</a>
- <a> 태그 외부에선 이벤트 속성을 없앨 수 없다 !!
<a href="http://www.naver.com" onclick="test04(); return false;">확인</a> <!--여기에서 return false로 기본이벤트 막아야함-->
<script>
function test04(){
alert("잠깐만요");
//return false; //여기에서 false를 해봐야 의미없음(기본이벤트 실행을 막지 못함)
}4. 로그인 폼 유효성 검사
폼 생성 조건
- 아이디에 대한 유효성 검사
- 아이디가 5~12 글자 사이인지 확인
- 아이디가 영문자 또는 숫자로만 되어있는지 확인
- 맞지 않을경우 return false를 보내서 기본 이벤트(전송) 실행을 막는다.
기본적인 로그인 폼 생성
<form action="test.do" method="get">
아이디 : <input type="text" id="userId" name="userid"><br>
<label for="userid" style="font-size:10px; color:gray;">영문자 또는 숫자로만 총 5~12 사이로 입력하시오</label><br>
비밀번호 : <input type="password" id="userPW" name="userPw"><br>
비밀번호 확인 : <input type="password" name="userPwChk" id="userPwChk"><br>
// onclick 먼저 실행되게 설정.
<input type="submit" value="회원가입" onclick="return validate();">
유효성검사를 위한 메소드구현
<script>
function validate(){
var userId = document.getElementById("userId").value;
var userPw = document.getElementById("userPW").value;
var uwerPwChk = document.getElementById("userPwChk").value;
// 정규표현식을 통한 유효성 검사
var regExp = /^[a-zA-Z0-9]{5,12}$/;
// 정규표현식 객체에서 제공하는 test 메소드
if(!regExp.test(userId)){
alert("유효한 아이디가 아닙니다 다시 입력해주세요");
document.getElementById("userid").select();
return false;
}
if(userPw!=userPwChk){
alert("비밀번호와 비밀번호 확인이 다릅니다.");
return false;
}
}
</script>
- 정규표현식을 사용하지 않고 유효성 검사를 실행했으면 어땠을까?
if(userId.length >= 5 && userId.length <= 12){
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')
}
}else{
return false;
}입력받은 아이디의 각각 문자 하나하나 조건에 부합하는지 확인해야하기 때문에 입력받은 아이디의 length만큼 반복해야함.
또 각각의 문자 하나하나 숫자인지 또는 영문소문자인지, 대문자인지 비교해야 되기 때문에 굉장히 복잡함.
정규표현식 규칙
- 정규표현식 틀 = / /
- 시작부터 끝 = ^ $
- []내의 문자중 하나라도 존재할경우 = []
- a-z = 소문자 a부터 z까지
- A-Z = 대문자 A부터 Z까지
- 0-9 = 숫자 0부터 9까지
- 5글자 이상 12글자 이하 = {5,12}