WEB/JavsScript
[JavaScript] DOM 이벤트 다루기
Raymond
2022. 6. 4. 20:45
DOM 이벤트
Event
웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
inline 이벤트 핸들러는 mdn에서 사용하지 마세요 라고 나옵니다.
EventTarget.addEventListener()
EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.
addEventListener(type, listener);
// 다른타입은 참고자료 참고하기
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);type
수신할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
type에 들어 갈 수 있는 값
listener
지정한 이벤트(Event 인터페이스를 구현한 객체)를 수신할 객체입니다. EventListener 인터페이스를 구현하는 객체거나, JavaScript 함수여야 합니다.
click 이벤트
1. inline 이벤트 핸들러 onclick 속성 사용
2. EventListener 사용
<body>
<button onclick="myFunction();">클릭</button>
<button id="btn2">클릭2</button>
<script>
function myFunction() {
console.log("onclick 이벤트 발생");
}
document.querySelector("#btn2").addEventListener("click", function () {
console.log("이벤트 리스너 사용");
});
</script>
</body>
load & unload 이벤트
load : 현재 페이지 DOM 생성, 이미지, css, js파일이 로드됐는지 체크 가능
(이미지,동영상이 로드되면 load 이벤트가 발생 -> 아래코드를 보면 setEvent()가 load 이벤트 리스너 안에 위치)
unload : 현재 페이지에서 다른 페이지로 이동할때 혹은 페이지를 닫을때
<body>
<button id="btnSave">저장</button>
<script>
function setEvent() {
document.getElementById("btnSave").addEventListener("click", function () {
console.log("저장 실행");
});
}
// setEvent();
window.addEventListener("load", function () {
setEvent();
});
window.addEventListener("unload", function () {
// arrBigData = null;
});
</script>
</body>
change 이벤트
1. inline 이벤트 핸들러 onchange 속성 사용
2. EventListener 사용
사용자 가 요소 값 변경을 커밋하면 , 및 요소 에 대해 change이벤트가 발생합니다.
이벤트 발생 HTML : <input><select><textarea>inputchangevalue
<body>
<select name="" id="sel" onchange="doChange1();">
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<select name="" id="sel2">
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<div>
<input type="checkbox" name="" id="chkAgreement" onchange="doChange3();" />
<label for="chkAgreement">동의합니다</label>
</div>
<div>
<input type="checkbox" name="" id="chkAgreement2" />
<label for="chkAgreement">동의합니다</label>
</div>
<script>
// change1
function doChange1() {
console.log(document.querySelector("#sel").value);
}
// change2
document
.querySelector("#sel2")
.addEventListener("change", () => console.log(event.target.value));
// change3
function doChange3() {
console.log(document.querySelector("#chkAgreement").checked);
}
// change4
document
.querySelector("#chkAgreement2")
.addEventListener("change", () => console.log(event.target.checked));
</script>
</body>
이벤트에 대해 알아보기
change2와 change4를 보면 event를 사용하는 모습을 볼 수 있습니다.
event객체는 target을 통하여 DOM요소에 접근합니다.
// change2
document
.querySelector("#sel2")
.addEventListener("change", () => console.log(event));
// change2
document
.querySelector("#sel2")
.addEventListener("change", () => console.log(event.target));
focus 이벤트
1. inline 이벤트 핸들러 onfocus 속성 사용
2. EventListener 사용
<body>
<input type="text" name="" id="" onfocus="myFunction()" />
<input type="text" name="" id="focus" />
<script>
// focus1
function myFunction() {
console.log("focus1 이벤트");
}
// focus2
document
.querySelector("#focus")
.addEventListener("focus", () => console.log("focus2 이벤트"));
</script>
</body>
blur 이벤트
blur는 focus가 빠져 나오는 경우에 발생한다.
1. inline 이벤트 핸들러 onblur 속성 사용
2. EventListener 사용
<body>
<input type="text" name="" id="str" onblur="myFunction()" />
<span id="strMsg" style="display: none; color: red">필수 입력 값입니다.</span>
<script>
// blur - 포커스가 빠져나올때
function myFunction() {
console.log("blur 이벤트");
if (document.getElementById("str").value === "") {
// 텍스트가 빈값이면 display에 빈값을 넣어 보이게 만든다.
document.getElementById("strMsg").style.display = "";
// 그이후에 텍스트박스로 포커스를 준다.
document.getElementById("str").focus();
} else {
// 텍스트가 적혀있으면 그대로 display = "none"
document.getElementById("strMsg").style.display = "none";
}
}
</script>
</body>
key 이벤트
inline이벤트로 onkeydown, onkeyup, onkeypress 가 있습니다.
키보드를 입력하면 onkeydown -> onkeypress -> onkeyup 순서로 이벤트가 일어납니다.
value값은 keyup이 일어나면 값이 들어간 것을 볼 수 있습니다. up하는순간 value가 출력
<body>
<input
type="text"
name=""
id=""
onkeydown="myFunction()"
onkeypress="myFunction()"
onkeyup="myFunction()"
/>
<br />
<input type="text" name="" id="id1" onkeyup="moveNext();" />-<input
type="text"
name=""
id="id2"
/>
<br />
<input type="text" name="" id="" onkeypress="onlyNumber();" />
<script>
function myFunction() {
// 어떤 타입의 이벤트인지 출력
console.log(event.type);
// keyup 이벤트 시점에 사용자가 입력한 값이 value 속성에 들어 감
console.log(event.target.value);
}
function moveNext() {
// 주민번호라고 가정하고 앞자리6자리 입력시 자동으로 포커스가 움직임 구현
if (event.target.value.length === 6) {
document.querySelector("#id2").focus();
}
}
function onlyNumber() {
console.log(event.keyCode);
// 아스키 코드값 48~57까지가 숫자 문자이다.
// .keyCode는 아스키코드를 10진수값으로 가져온다.
if (event.keyCode >= 48 && event.keyCode <= 57) {
} else {
event.preventDefault(); // 이벤트 중지 시킴
}
}
</script>
</body>event.preventDefault() 알아보기
이벤트의 기본 동작을 중단시킨다.
마우스 우클릭을 막는 코드 -> contextmenu는 우클릭 이벤트를 나타냄
<script>
// contextmenu - 마우스 우클릭
document.addEventListener("contextmenu", function () {
event.preventDefault(); // 이벤트의 기본 동작을 중지
});
</script>
input 이벤트
keydonw -> keypress -> input -> keyup
중간에 input이 추가되었습니다. keyup과 input의 차이점은
keyup 이벤트는 일어나는 순간에 value 속성 값에 값이 들어감. 사용자 눈에 보이게 됨.
input 이벤트는 일어나는 순간에 value 속성 값에 값이 들어감. 그런데 화면에는 보이지 않음. 사용자 눈에는 안 보임.
이를 활용하여 개발자가 원하는 값만을 입력받을수 있게 만들 수 있습니다.
<body>
<div>
<label for="number">숫자만 입력 가능한 필드</label>
<input type="text" name="" id="number" />
</div>
<div>
<label for="lowercase">소문자만 입력 가능한 필드</label>
<input type="text" name="" id="lowercase" oninput="onlyLowercase();" />
</div>
<div>
<label for="uppercase">대문자만 입력 가능한 필드</label>
<input type="text" name="" id="uppercase" oninput="onlyUppercase();" />
</div>
<div>
<label for="korean">한글만 입력 가능한 필드</label>
<input type="text" name="" id="korean" oninput="onlyKorean();" />
</div>
<script>
function onlyNumber() {
const regexp = /\D/g; // 숫자가 아닌 모든 문자를 모두 찾아라
console.log(event.target.value);
event.target.value = event.target.value.replace(regexp, "");
}
function onlyLowercase() {
const regexp = /[^a-z]/g; // 소문자가 아닌 모든 문자를 모두 찾아라
console.log(event.target.value);
event.target.value = event.target.value.replace(regexp, "");
}
function onlyUppercase() {
const regexp = /[^A-Z]/g; // 대문자가 아닌 모든 문자를 모두 찾아라
console.log(event.target.value);
event.target.value = event.target.value.replace(regexp, "");
}
function onlyKorean() {
const regexp = /[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g; // 한글이 아닌 모든 문자 찾기
console.log(event.target.value);
event.target.value = event.target.value.replace(regexp, "");
}
</script>
</body>
참고) 아래 두 코드는 같다.
<script>
function onlyNumber() {
const regexp = /\D/g; // 숫자가 아닌 모든 문자를 모두 찾아라
console.log(event.target.value);
event.target.value = event.target.value.replace(regexp, "");
}
document.querySelector("#number").addEventListener("input", () => {
const regexp = /\D/g; // 숫자가 아닌 모든 문자를 모두 찾아라
console.log(event.target.value);
return (event.target.value = event.target.value.replace(regexp, ""));
});
</script>
scroll 이벤트
window.scrollY의 값이 850보다 큰 경우에만 버튼을 활성화한다.
<body onscroll="checkScroll();">
<p>여러 줄을 만들어 봅시다.</p>
<p>여러 줄을 만들어 봅시다.</p>
<p>여러 줄을 만들어 봅시다.</p>
<button
id="btnTop"
style="
position: fixed;
bottom: 10px;
right: 50px;
width: 70px;
height: 70px;
border-radius: 35px;
display: none;
"
>
^
</button>
<script>
let showScrollBtn = false;
function checkScroll() {
if (window.scrollY > 850 && !showScrollBtn) {
showScrollBtn = true;
document.querySelector("#btnTop").style.display = "";
console.log(window.scrollY);
} else if (window.scrollY <= 850 && showScrollBtn) {
showScrollBtn = false;
document.querySelector("#btnTop").style.display = "none";
console.log(window.scrollY);
}
}
window.addEventListener("load", function () {
document.querySelector("#btnTop").addEventListener("click", function () {
document.documentElement.scrollTop = 0;
});
});
</script>
</body>
참고자료
https://developer.mozilla.org/ko/docs/Web/API/Event
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener