[구디아카데미]
✅ 이벤트
- 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때
어떤 사건을 발생시키는 것
✅ 이벤트가 발생하는 상황
- 마우스 속성
click : 마우스 좌클릭했을때 발생하는 속성
dbclick : 마우스 더블클릭했을때 발생하는 속성
mousecenter : 마우스 포인터가 지정한 element(태그)영역에 들어왔을 때
mouseleave : 마우스 포인터가 지정한 element(태그)영역을 벗어났을 때 발생하는 속성- 키보드 속성
keyup : keyboard의 key버튼이 올라왔을 때 발생하는 속성
keydown : keyboard의 key버튼이 내려갔을 때 발생하는 속성
keypress : keyboard의 key버튼이 눌려져있을 때 발생하는 속성- input 속성
focus : 어떤 부분을 클릭해서 input입력창에 커서가 깜빡일 때(활성화될때) 발생하는 속성
blur : input 입력창에 커서가 사라졌을 때 발생하는 속성
change : input 태그의 value속성에 값이 변경되었을 때 발생하는 속성 * select 태그에 적용
submit : input type submit을 클릭했을 때 발생하는 속성
reset : input type reset을 클릭했을 때 발생하는 속성- window 속성
load : 페이지의 내용을 모두 로드한 후 발생하는 속성
resize : 윈도우창의 크기가 변경되었을 때 발생하는 속성
scroll : 윈도우창의 scroll이 조정되었을 때 발생하는 속성✅ 이벤트 3가지 방식
- 고전 방식으로 이벤트 설정
- 인라인 방식으로 이벤트 설정 -> 태그안에다가 이벤트 작성
- 표준 방식으로 이벤트 설정
<h2>3가지 방식으로 적용하기</h2>
<div id="container">
<ul>
<li>고전방식으로 이벤트 설정</li>
<li onmouseleave="alert('마우스 떠남');">인라인방식으로 설정</li>
<li>표준방식으로 설정</li>
</ul>
</div>
<script>
const lis = document.querySelectorAll("#container li");
console.log(lis) // lis에는 3개의 객체들이 배열에 저장되어있다.
// 고전방식으로 이벤트 설정
lis[0].onmouseenter=function(event){
alert("마우스 들어왔따!");
};
// lis[0].onmouseenter=enterHandler; // 대입할 땐 함수 이름만 넣어야함
// function enterHandler(event){
// alert("선언적 함수 핸들러");
// }
// 표준방식으로 이벤트 설정하기
lis[2].addEventListener("click",function(event){ // 첫번째 인수 : 기능 두번째인수 : 호출방법과 결과
alert("표준이벤트등록");
})
</script> <div id="eventObj">
<p>마우스 이벤트</p>
키보드 이벤트<input type="text" id="keyboardEvent">
<button ondblclick="doubleClickTest(event);">더블클릭!</button>
<!-- 인라인방식으로 할 경우 event 명시 제데로해야함 -->
</div>
<script>
function doubleClickTest(e){
// console.log(this);
console.log(e);
}
const $p = document.querySelector("#eventObj>p");
const paramTest=(function(title){
return function(e){
console.log(title);
console.log(e.target);
}
})
$p.addEventListener("click",function(event){
// console.log(this);
console.log(event);
console.log(event.target);
console.log(event.pageX);
console.log(event.pageY);
});
const $input=document.querySelector("#eventObj>input");
$input.addEventListener("keyup",(event)=>{
if(event.key=='Enter'){ // 엔터눌렀을 경우
location.assign("http://gdu.co.kr");
}
});
</script>✅ 아이디 패스워드 확인 및 form 태그 예제
<h3>input 이벤트 설정하기</h3>
<div id="inputEvent">
아이디 <input type="text" name="userId" id="userId"><span id="printMsg"></span><br>
패스워드 <input type="password" name="password" id="password"><br>
패스워드확인 <input type="password" id="passwordCk"><br>
<div id="passck">
<!-- 클래스를 여러개 선언할 때 구분할 때는 띄어쓰기로 구분함 -->
<span class="result ok">비밀번호가 일치합니다.</span>
<span class="result error">비밀번호가 일치하지 않습니다.</span>
</div>
이름 <input type="text" name="userName"><br>
<select name="title" id="title">
<option value="title">제목</option>
<option value="content">내용</option>
<option value="writer">작성자</option>
</select>
<h3 id="optionMenu">선택하기</h3>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</div> </p>
<style>
/* 위 1,2,3,4 부분은 처음에 안보이게 설정 */
#optionMenu+div{
display: none;
}
/* 비밀번호 상태 출력결과가 처음에 안보이게 설정 */
#passck>.result{
display: none;
}
#passck>.ok{
color: green;
font-weight: bolder;
}
#passck>.error{
color: red;
font-weight: bolder;
}
</style>
<script>
document.getElementById("optionMenu").addEventListener("click",(()=>{
let flag=true;
return e=>{
e.target.nextElementSibling.style.display=flag?"block":"none";
flag = !flag;
}
})());
document.getElementById("title").addEventListener("change",e=>{
console.log(e.target.value); // 체크된 것의 값이 출력
})
document.getElementsByName("userName")[0].addEventListener("change",e=>{
console.log(e.target.value); // e-> 이벤트 대상의 객체 target -> 이벤트 속성 value -> 이벤트가 실행된 값
});
// focus랑 alert는 같이 잘 사용하지 않음
document.getElementById("userId").addEventListener("focus",e=>{ // 아이디부분에 갖다대면 문구가 나옴
document.getElementById("printMsg").innerText="아이디는 8글자 이상 입력";
});
document.getElementById("passwordCk").addEventListener("blur",e=>{ //
const $p = document.createElement("p"); // p 태그 생성
let msg="";
const pw = document.getElementById("password").value; // 패스워드를 입력한 값
const pwck = e.target.value; // e-> 이벤트 대상의 객체 target -> 이벤트 속성 즉 이 값은 패스워드를 확인한 값
// 둘다 출력되는 상황을 막기위해 처음부터 막아놓음
document.querySelectorAll(".result").forEach(e=>e.style.display="none");
// 클래스이름의 경로를 표시할때는 앞에 .을 붙이며, 클래스이름으로 가져올때는 이름으로만 접근
if(pw.length>0 && pwck.length>0 && pw==pwck){
//msg="비밀번호가 일치합니다."
document.getElementsByClassName("ok")[0].style.display="inline"; // none으로 막아논 것들은 inline으로 보이게함
}else{
//msg="비밀번호가 일치하지 않습니다.";
document.getElementsByClassName("error")[0].style.display="inline";
document.getElementById("password").value=""; // 패스워드 초기화
e.target.value=""; // 패스워드확인 초기화
document.getElementById("password").focus(); // 패스워드 입력창에 다시 포커스됨
}
$p.innerText = msg;
//e.target.insertAdjacentElement("afterend",$p);
});
</script>
<!-- form태그는 onsubmit, onreset 속성들이 있음 -->
<form action="" onsubmit="return fn_validate(event);" onreset="fn_reset();">
<input type="text" name="test">
<!--token tag"><input type="submit" value="전송"">
<!-- token tag"><input type="reset" value="취소"">
</form>
<script>
function fn_reset(){
alert("reset함");
}
function fn_validate(e){
alert("제출함");
const data = e.target.children[0].value;
if(data.length<3)return false; // 4글자이상일때만 값이 넘어감
else return true;
}
</script>✅ 윈도우창에 대한 이벤트 설정
<p>윈도우창에 대한 이벤트 설정하기</p>
<script>
window.addEventListener("resize",e=>{
// 윈도우의 크기가 변경했을 때 발생하는 이벤트
console.log(e);
console.log(e.target.innerHeight,e.target.innerWidth);
});
window.addEventListener("scroll",e=>{
// 윈도우 페이지를 스크롤 했을 때 발생하는 이벤트
console.log(e);
console.log(window.scrollX,window.scrollY);
})
</script>✅ 버블링 효과 차단하기
- 버블링 효과 : 자식에서 발생한 이벤트를 부모에게 전달하는 현상
- 이벤트.stopImmediatePropagation()
<div id="container3" class="test">
parent
<div class="test">
child
<div class="test">
innerchild
</div>
</div>
</div>
<style>
div#container3{
width: 400px;
height: 300px;
border: 1px solid magenta;
}
.test{
padding: 20px;
border: 1px dotted skyblue;
}
</style>
<script>
const el = document.querySelectorAll(".test");
el.forEach(e=>{
e.addEventListener("click",e=>{
alert(e.target.innerText);
e.stopImmediatePropagation(); // stopImmediatePropagation()메소드를 통해 버블링 차단가능
// 위 메소드가 없으면 자식에 있는 것 호출시 부모에 있는 중복된 것들도 같이 출력됨
})
})
</script> ✅ 생성된 태그에 이벤트설정
<h3>생성된 태그에 이벤트설정하기</h3>
<input type="text">
<button onclick="addEventElement(event);">생성하기</button>
<script>
const addEventElement=(e)=>{
const $btn=document.createElement("button");
$btn.innerText="생성한버튼";
$btn.addEventListener("click",event=>{
alert("생성된 버튼을 클릭함");
e.target.click(); // $btn.addEventListener("click",event) -> 맨위의 매개변수와 다른 이름으로 지어야함
// e말고 event로 해야함
// e.target.click()은 맨위의
// <button>생성하기</button>와 동일함
e.target.previousElementSibling.focus();
});
e.target.insertAdjacentElement("afterend",$btn);
}
</script>
<h3>input 태그에 작성한 값 초기화시키기</h3>
<div id="inputValue">
<input type="text" id="target">
<input type="text" id="target">
<input type="text" id="target">
<input type="text" id="target">
<input type="text" id="target">
</div>
<button id="btn2">초기화</button>
<script>
document.querySelector("#btn2").addEventListener("click",e=>{
const inputs = document.querySelectorAll("#inputValue>input");
inputs.forEach(e=>e.value=""); // querySelectorAll로 모든 태그들을 갖고와서 공백으로 대입하여 초기화시킴
});
</script>✅ 브라우저에 영속성있는 값을 저장
- localstorage : 브라우저에서 영속성있게(닫아도 데이터를 유지) 저장을 해서 관리하는 데이터
- sessionstorage : 브라우저가 닫히면 데이터를 유지하지 않음 -> 접속중에만 데이터를 유지하는 객체
<script>
console.log(localStorage);
console.log(sessionStorage);
// key:value 형식으로 데이터를 저장
// 함수를 이용해서 저장 및 출력
// setItem, getItem
localStorage.setItem("saveUserId","admin"); // 저장 -> setItem (한번 저장하면 계속저장됨)
const data = localStorage.getItem("saveUserId"); // 데이터 갖고오기 -> getItem
console.log(data);
// 데이터 삭제하기
// removeItem("key");
// localStorage.removeItem("saveUserId");
localStorage.setItem("readBoard","|1|2|3|4|"); // 값 저장
localStorage.setItem("readProduct","|1|2|3|4|"); // 값저장
// 데이터 전체 삭제
// localStorage.clear();
// sessionStorage는 페이지가 끊어지지 않으면 계속 저장됨
// 페이지를 이동해도 페이지 자체를 x 하지 않는이상 데이터가 저장됨
sessionStorage.setItem("loginMember","admin");
sessionStorage.setItem("data","1234");
</script>
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!