국비 42일차 Javascript DOM level 0, DOM level 2 이벤트 처리
2021. 3. 9. 18:29
2021.03.09 국비교육 42일차
[TOC]
이벤트
- 이벤트 발생 형태
- 어플리케이션 사용자가 발생시키는 형태 : 버튼클릭, 키보드 입력 등
- 어플리케이션 스스로 발생 : 페이지 로드 등
DOM Level 0 (인라인 이벤트모델, 고전 이벤트 모델 )
- 방식 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function init(){
console.log("init() : 모든 html이 모두 DOM으로 생성된 후 실행")
}
///////////////////////////////
function xxx(){
console.log("click xxx() 호출");
}
function yyy(){
console.log("onmouseover"); // 마우스 올리면 동작
}
function zzz(){
console.log("onmouseout"); // 마우스 빠져 나가면 동작
}
/////////////////////////////////////////
function kkk(v){
console.log("키보드가 up", v);
}
function xyz(e){ //매개변수 : 이벤트
console.log(e, e.screenX, e.screenY); // 좌표값 = 이벤트가 발생한 위치
}
</script>
</head>
<body onload="init()">
<!-- 인라인 방식 이벤트 처리, 화면 로딩 후 -->
<button onclick="xxx()" onmouseover="yyy()" onmouseout="zzz()">클릭</button>
<!-- 인라인 방식 처리 click, mouseover, mouseout -->
<input type="text" name="userid" onkeyUp="kkk(this.value)">
<!-- 인라인 방식 처리, keyup, this : 이벤트 발생 태그 -->
<button onclick="xyz(event)">이벤트정보</button>
<!-- 인라인 방식 처리 발생한 event객체를 매개변수로 넘김 -->
</body>
</html>- 방식2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = init; // 함수등록 but init(); 은 안됨
function init(){
console.log("모든 html이 모두 DOM으로 생성된 후 실행");
///xxx 클릭 이벤트 처리 등록
document.getElementById("xxx").onclick = function(){
console.log("clicked");
};
/// xxx onmouserover 핸들러 -> console.log("mouseover")
document.getElementById("xxx").onmouseover = function(){
console.log("mouseover");
};
document.getElementById("xxx").onmouseout = function(){
console.log("mouseout");
};
//keyup
document.getElementById("userid").onkeyup = function(){
console.log(this.value);
}
document.getElementById("xyz").onclick = function(){
console.log(event.screenX, event.screenY); // 매개변수 없이 사용 가능
}
}
/* window.onload = function (){
console.log("모든 html이 모두 DOM으로 생성된 후 실행");
} */
</script>
</head>
<body>
<button id = "xxx">클릭</button>
<input type = "text" name = "userid" id = "userid">
<button id = "xyz">이벤트 정보</button>
</body>
</html>- mouseover시에 이미지 전환하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length-1;i++){
var img = imgs[i];
img.onmouseover = function(){ // 태그에 이벤트 핸들러 달아주기
console.log(imgs[3].src = this.src);
}
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td><img src="../image/a.jpg" width="100" height="100"></td>
<td><img src="../image/b.jpg" width="100" height="100"></td>
<td><img src="../image/c.jpg" width="100" height="100"></td>
</tr>
<tr>
<td colspan="3"><img src="../image/a.jpg" width="300"
height="300"></td>
</tr>
</table>
</body>
</html>preventDefault
- 이벤트 stop시킴
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var form=document.getElementById("xxx");
console.log(form);
document.getElementById("xxx").onsubmit=function(){
alert("xxxxxxx");
event.preventDefault();
}
var form=document.getElementById("yyy");
console.log(form);
document.getElementById("yyy").onsubmit=function(){
alert("yyyyyyyyyyyyyy");
return false;
}
};
function xxx(){
alert("submit");
}
function xxx2(){
var id= document.getElementById("userid").value;
var passwd= document.getElementById("passwd").value;
var result=false;
if(id.length>=3 && passwd.length !=0){
result= true;
}else{
alert("에러");
}
return result; //return false; action 금지 form에 return이꼭 있어야함
//return false;
}
function xxx3(e){
alert("submit");
e.preventDefault()//action 금지 event.prevent()
//event.preventDefault();
}
</script>
</head>
<body>
<form action="target.html" onsubmit="xxx()">
아이디<input type="text" name="userid"><br>
비번<input type="text" name="passwd"><br>
<button>버튼</button>
<input type="submit" value="로그인">
<input type="reset" value="취소"><br>
</form>
<form action="target.html" onsubmit="return xxx2()"><!-- 주의 -->
아이디<input type="text" name="userid" id="userid"><br>
비번<input type="text" name="passwd" id="passwd"><br>
<button>버튼</button>
<input type="submit" value="로그인"><br>
</form>
<form action="target.html" onsubmit="xxx3(event)"><!-- 주의 -->
아이디<input type="text" name="userid" ><br>
비번<input type="text" name="passwd" ><br>
<button>버튼</button>
<input type="submit" value="로그인"><br>
</form>
<form action="target.html" id="test"><!-- 주의 -->
아이디<input type="text" name="userid" ><br>
비번<input type="text" name="passwd" ><br>
<button>버튼</button>
<input type="submit" value="로그인"><br>
</form>
<form action="target.html" id="xxx"><!-- 주의 고전모델방식 onsubmit삭제 -->
아이디555555<input type="text" name="userid" ><br>
비번555555<input type="text" name="passwd" ><br>
<button>버튼</button>
<input type="submit" value="로그인"><br>
</form>
<form action="target.html" id="yyy"><!-- 주의 -->
아이디666666<input type="text" name="userid" ><br>
비번666666<input type="text" name="passwd" ><br>
<button>버튼</button>
<input type="submit" value="로그인"><br>
</form>
</body>
</html>
로그인 오류 검증
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function formSubmit(){
var result = true; // 리턴시킬 값
var str = ""; //span에 보여줄 에러메시지
//사용자 입력데이터
var userid = document.getElementById("userid").value;
var passwd = document.getElementById("passwd").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
//span 에러 메시지
var idSpan = document.getElementById("idSpan");
var pwSpan = document.getElementById("pwSpan");
var nameSpan = document.getElementById("nameSpan");
var emailSpan = document.getElementById("emailSpan");
console.log("!")
if(userid.length ==0){
str = "아이디에러";
idSpan.innerHTML = str;
pwSpan.innerHTML = "";
nameSpan.innerHTML = "";
emailSpan.innerHTML = "";
result = false;
}else if(passwd.length ==0 || Number.isNaN(parseInt(passwd))){
str = "패스워드 에러";
idSpan.innerHTML = "";
pwSpan.innerHTML = str;
nameSpan.innerHTML = "";
emailSpan.innerHTML = "";
result = false;
}else if(username.length >=4 || username.length ==0){
str = "이름 에러";
idSpan.innerHTML = "";
pwSpan.innerHTML = "";
nameSpan.innerHTML = str;
emailSpan.innerHTML = "";
result = false;
}else if(email.length == 0){
str = "이메일 에러";
idSpan.innerHTML = "";
pwSpan.innerHTML = "";
nameSpan.innerHTML = "";
emailSpan.innerHTML = str;
result = false;
}
return result;
}
</script>
</head>
<body>
<form action="target.html" onsubmit = "return formSubmit();"> <!-- 인라인 방식처리 -->
아이디<input type="text" name="userid" id="userid">
<span id="idSpan"></span><br>
비번<input type="text" name="passwd" id="passwd">
<span id="pwSpan"></span><br>
이름<input type="text" name="username" id="username">
<span id="nameSpan"></span><br>
이메일<input type="text" name="email" id="email">
<span id="emailSpan"></span><br>
<input type="submit" value="로그인">
<input type="reset" value="취소"><br>
<button>버튼</button>
</form>
</body>
</html>DOM level2 addEventListener
- 기본 사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){ //화면에 dom이 다 준비 된 후 실행
/* var xxx = document.getElementById("xxx");
xxx.addEventListener("click", function (){ //이벤트명 on이 빠짐, 이벤트 발생시 동작할 함수
console.log("버튼클릭");
}, false); */ // xxx에 클릭 이벤트 발생시 function 동작, 마지막 기본 false
var xxx = document.getElementById("xxx");
xxx.addEventListener("click", kkk, false); //이벤이름 on빠짐 kkk = 함수이름
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function() {
event.preventDefault();
console.log("submit취소")
//return false 안됨
}, false)
}
function kkk(){ //kkk, 클릭 시 이벤트 처리 함수, addEventListener에 등록사용
console.log("버튼클릭");
}
</script>
</head>
<body>
<form action="target.html" id="myForm"><!-- addEventListener사용 인라인 핸들러 없음 -->
아이디<input type="text" name="userid"><br>
비번<input type="text" name="passwd"><br>
<button>버튼</button>
<input type="submit" value="로그인">
<input type="reset" value="취소"><br>
<button id="xxx">xxx클릭</button>
</form>
</body>
</html>버블링 방지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
var a= document.getElementById("a");
var b= document.getElementById("b");
a.addEventListener("click", function(){
console.log("a");
}, false)
b.addEventListener("click", function(e){ //자식에서 click이벤트 발생시키면 부모까지 영향을 미침
console.log("b");
e.stopPropagation(); // 이벤트 전파 방지
//event.stopPropagation();//매개변수 안받을때
}, false)
}
</script>
</head>
<body>
<div id="a" style="background-color: #ff0000">
a
<div id="b" style="background-color: #00ff00">b</div>
</div>
</body>
</html>체크박스 value 복사
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload= function(){
document.getElementById("chk").addEventListener("click", check, false);
//chk 클릭시 동작할 함수로 check함수 등록
document.getElementById("address2").addEventListener("keyup", function() { //keyup
console.log(document.querySelector("#result")); // 하나의 태그를 리턴, id에 사용, css선택자 사용
document.querySelector("#result").innerHTML = this.value; //this는 address2있는 부분
}, false);
}
function check(){
document.getElementById("address2").value =
document.getElementById("address").value;
}
</script>
</head>
<body>
<input type="text" name="address" id="address" value="공주~~~~"><br>
배송지가 같으면 다음을 체크하세요
<input type="checkbox" name="chk" id="chk"><br>
배송지 주소
<input type="text" name="address2" id="address2"
><br>
<span id="result"></span>
</body>
</html>자식 노드 이벤트 발생시키기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//인라인 방식 = > addEventListener방식으로 변환 : setview,unsetview를 사용함수로 등록
window.onload = function(){
document.getElementById("vi").addEventListener("click", setView);
document.getElementById("unvi").addEventListener("click", unsetView);
}
function setView(){
var image = document.querySelector("#detail h3");
image.style.display = "block";
}
function unsetView(){
var image = document.querySelector("#detail h3");
image.style.display = "none";
}
</script>
</head>
<body>
<input type="button" id="vi" value="보이기" ><br>
<input type="button" id="unvi" value="감추기" ><br>
<div id="detail">
<h1>아래 내용이 숨겨집니다</h1>
<h3>
<font color="red">다음과 같은 내용이 숨겨지게 됩니다. </font>
</h3>
</div>
</body>
</html>여러가지 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var image;
window.onload = function(){
image = document.getElementById("images");
image.addEventListener("click", aaa);
image.addEventListener("mouseover", bbb);
image.addEventListener("mouseout", ccc);
}
function aaa(){
image.src = "../image/b.jpg";
}
function bbb(){
image.src = "../image/c.jpg";
}
function ccc(){
image.src = "../image/d.jpg";
}
</script>
</head>
<body>
<img id="images" src="../image/a.jpg" width = "200" height = "200">
</body>
</html>'ETC > 국비교육' 카테고리의 다른 글
| 국비 45일차 서블릿 파라미터 처리(values, names, map) (0) | 2021.03.12 |
|---|---|
| 국비 44일차 Servlet (라이프사이클, thread unsafe, 응답처리, 요청처리, 파라미터 처리) (0) | 2021.03.12 |
| 국비 41일차 Javascript ( onload, onclick, onchange, onkeyup 활용) (0) | 2021.03.08 |
| 국비 40일차 Javascript (객체 BOM DOM) (0) | 2021.03.05 |
| 국비 39일차 Javascript 함수 + 응용 (0) | 2021.03.04 |