JavaScript_VSC
16. 이벤트 속성
76beny
2022. 7. 1. 13:37
input(입력창) 태그관련 이벤트
- focus : input태그에 focus되었을때 발생 * 주의 blur가 같이 처리됨 -> 무한루프가 됨
- blur : input태그의 focus가 사라졌을때 발생
- change : input태그의 value속성의 값이 변경됐을때 발생 * select태그 이벤트에 많이 사용
- submit : form태그에서 submit타입을 클릭했을때 발생 form태그로 데이터전송시 발생
- reset : form태그에서 reset타입을 클릭했을때 발생
mouse관련 이벤트
- click : 마우스 좌클릭했을때 발생
- dbclick : 마우스 더블클릭했을때 발생
- mouseenter : 지정한 영역안에 마우스가 들어왔을때 발생
- mouseleave : 지정한 영역안에서 마우스가 나갔을때 발생
key관련 이벤트
- keyup : 키가 올라왔을때 발생
- keydown : 키가 내려갔을때 발생
- keypress : 키가 눌렸을때 발생
윈도우창 관련 이벤트
- load : 페이지의 태그들이 다 로드됐을때 발생 * 페이지관련 이벤트
- resize : 윈도우 크기가 조정됐을때 발생
- scroll : 창에서 스크롤이 조정됐을때 발생
<이벤트 등록 방식>
1. 고전 이벤트
- 자바스크립의 고유 함수를 활용하는 기법
<button id="btn1">버튼1</button>
<button id="btn2">버튼2</button>
<div id="div1"></div>
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var div1 = document.getElementById('div1');
btn1.onclick = function() {
div1.innerHTML += 'btn1이 클릭됨! <br>';
}
btn2.onclick = function() {
div1.innerHTML += 'btn2이 클릭됨! <br>';
btn1.onclick = null;
div1.innerHTML += 'btn1이 onclick가 제거됨! <br>';//버튼1안눌림
}
</script>
2. 인라인 이벤트 방식 ★★★★★
- HTML 태그에 인라인으로 이벤트를 등록하는 방법
<button id="btn3" onclick="test3();">버튼1</button>
<button onclick="test4();">버튼2</button>
<div id="div2"></div>
<script>
var div2 = document.getElementById('div2');
var count = 0;
function test3() {
div2.innerHTML += '' + count++ + '번 클릭됨!<br>';
}
function test4() {
var btn3 = document.getElementById('btn3');
btn3.onclick = null;
div2.innerHTML += 'btn3의 onclick가 제거됨!';
}
</script>
<hr><br>
3. 표준 이벤트 모델
- w3c에서 지정한 표준적인 이벤트 등록방식
- 여러개의 이벤트를 등록할수 있다. (강사는 비추함)
<button id="btn4">실행</button>
<button id="btn5">실행</button>
<div id="div3"></div>
<script>
var btn4 = document.getElementById('btn4');
var btn5 = document.getElementById('btn5');
var div3 = document.getElementById('div3');
btn4.addEventListener('click', function(event) {
div3.innerHTML += '익명함수로 호출하는 방법 1 <br>';
});
var clickEvent = function(event) {
div3.innerHTML += '익명함수로 호출하는 방법 2 <br>';
}
btn5.addEventListener('click', clickEvent);
</script>
<hr><br>
응용예제 - id 유효성 검사
- button type에서 submit 설정시 onclick 이벤트의 결과에 따라 submit의 동작여부를 컨트롤 가능!
<fieldset>
<legend>회원 가입</legend>
<form action="#" method="get">
<input type="text" name="u_name" id="u_name" placeholder="이름"><br>
<input type="text" name="u_id" id="u_id" placeholder="아이디"><br>
<input type="password" name="u_pw1" id="u_pw1" placeholder="비밀번호"><br>
<input type="password" name="u_pw2" id="u_pw2" placeholder="비밀번호 확인"><br>
<button type="submit" onclick="return test5();">가입 요청</button>
</form>
</fieldset>
<div id="div5"></div>
<script>
function test5() {
var name = document.getElementById('u_name');
var id = document.getElementById('u_id');
var pw1 = document.getElementById('u_pw1');
var pw2 = document.getElementById('u_pw2');
var div5 = document.getElementById('div5');
if (name.value.length == 0 || id.value.length == 0) {
div5.innerHTML += '아이디 또는 이름을 입력하세요! <br>';
name.select(); // name 객체에 포커싱이 간다!
return false;
}
if (pw1.value != pw2.value || pw1.value.length == 0) {
div5.innerHTML += '비밀번호를 다시 입력하세요! <br>';
pw2.select();
pw1.value = '';
pw2.value = '';
return false;
}
return true;
}
</script>정규식을 이용한 문자양식 체크하는 방법
<script src="JS17_stringutil.js"></script>
<h3>추가 코드 (String util을 통해 정규식 활용)</h3>
<p>이메일 형식 확인</p>
<input type="text" onkeyup="fn_inputKey(9, this);" />
<br>
<p>전화번호 형식 확인</p>
<input type="text" onkeyup="fn_inputKey(6, this);" />
<br>
<p>영문(ID) 형식 확인</p>
<input type="text" onkeyup="fn_inputKey(5, this);" />
<br>
<p>한글(이름) 형식 확인</p>
<input type="text" onkeyup="fn_inputKey(2, this);" />
<br>
추가 코드 (String util을 통해 정규식 활용)
이메일 형식 확인
전화번호 형식 확인
영문(ID) 형식 확인
한글(이름) 형식 확인
/**
* 공통 문자열 처리 스크립트
*
* @author kms
* @since 2019.10.29
*
*/
/**
* 앞뒤 공백 trim
* param : str - 텍스트
* return : 공백제거한 텍스트
*/
fn_trim = function(str) {
return str.replace(/(^\s*)|(\s*$)/gi, "");
}
/**
* 값이 null인지 확인
* param : str - 텍스트
* return : 공백인지 여부
*/
fn_empty = function(str) {
if (str == undefined) {
return true;
}
if (str == "" || str.length <= 0) {
return true;
}
return false;
}
/**
* input 입력 제한
* param : gubun - 1 숫자만 입력, 2 - 한글만 입력 3- 한글만 입력불가
* param : obj - 적용 객체
*/
fn_inputKey = function(gubun, obj) {
//숫자만 입력 가능
if (gubun == '1') {
obj.value = obj.value.replace(/[^0-9]/g, '');
}
//한글만 입력 가능
else if (gubun == '2') {
obj.value = obj.value.replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|\s]/g, '');
}
//한글만 입력 불가능
else if (gubun == '3') {
obj.value = obj.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|\s]/g, '');
} else if (gubun == 'ip') {
obj.value = obj.value.replace(/[^0-9.]/g, '');
}
//한글, 영문 입력가능
else if (gubun == '4') {
var reg = /[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|\s]/g;
if (reg.test(obj.value)) {
obj.value = obj.value.replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|\s]/g, '');
}
}
// 한글, 특수문자 입력 불가능 (-_만 허용)
else if (gubun == '5') {
obj.value = obj.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|\{\}\[\]\/?.,;:|\)*~`!^\+<>@\#$%&\\\=\(\'\"\s]/g, '');
}
//숫자, - 만 입력 가능(전화번호/팩스번호 데이터 등)
else if (gubun == '6') {
obj.value = obj.value.replace(/[^0-9-]/g, '');
}
//영문,숫자 입력가능(코드성데이터)
else if (gubun == '7') {
obj.value = obj.value.replace(/[^0-9a-zA-Z]/g, '');
}
//영문만 입력가능
else if (gubun == '8') {
obj.value = obj.value.replace(/[0-9]|[^\!-z]/gi, '');
}
// 한글, 특수문자 입력 불가능 (-_@.만 허용) - 이메일 데이터
else if (gubun == '9') {
obj.value = obj.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|\{\}\[\]\/?,;:|\)*~`!^\+<>\#$%&\\\=\(\'\"\s]/g, '');
}
}
/**
* 정규식 반환
* param : gubun - 1 ip 형식, 2 url 형식
* return : regExp - 정규식
*/
fn_regExp = function(gubun) {
var regExp
//ip형식
if (gubun == "ip") {
regExp = /^(1|2)?\d?\d([.](1|2)?\d?\d){3}$/;
}
//url형식
// else if(gubun == "url"){
// regExp = /^(http(s)?\:\/\/)?((\w+)[.])+(asia|biz|cc|cn|com|de|eu|in|info|jobs|jp|kr|mobi|mx|name|net|nz|org|travel|tv|tw|uk|us)(\/(\w*))*$/i;
// }
//공백여부
else if (gubun == "empty") {
regExp = /\s/g;
}
//숫자만
else if (gubun == "num") {
regExp = /^[0-9]+$/;
}
//이메일 체크 정규식
else if (gubun == "email") {
regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
}
//핸드폰번호 정규식
else if (gubun == "mbtl") {
regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
}
//일반 전화번호 정규식
else if (gubun == "tel") {
regExp = /^\d{2,3}-?\d{3,4}-?\d{4}$/;
}
//특수문자(공백포함) 정규식
else if (gubun == "notText") {
regExp = /^[0-9a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]+$/;
}
//아이디 정규식 (4~20자리, 영문/숫자 조합, 특수문자 -_만 허용, 첫글자 영문)
else if (gubun == "id") {
regExp = /^[a-z]+[a-z0-9_-]{3,19}$/g;
}
//비밀번호 정규식 (9~20자리, 영문/숫자/특수문자 필수 포함)
else if (gubun == "password") {
regExp = /^.*(?=^.{9,20}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=*]).*$/;
//특수문자 불가능
} else if (gubun == "notSc") {
regExp = /[\{\}\[\]\/?;:|\)*~`^\-_+<>@\#$%&\\\=\(\'\"]/gi
//생년월일 체크 정규식
} else if (gubun == "birthday") {
regExp = /^(19[0-9][0-9]|20\d{2})(0[0-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/;
//YYYY-MM-DD 날짜 형식(하이픈 포함)
} else if (gubun == "hyphenYYYYMMDD") {
regExp = /^(19|20)\d{2}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[0-1])$/;
}
return regExp;
}
/**
* <, > 문자 replace
*
* */
fn_scriptLtGtReplace = function(value) {
if (value == null || value == "") {
return "";
}
var strValue = value;
strValue = strValue.replace(/\>/g, ">");
strValue = strValue.replace(/\</g, "<");
return strValue;
}"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.
이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우
민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."