＃알아야 할 개념 :
● 개념 : event 객체의 프로퍼티 메소드 : preventDefault();
○ 정의 : event객체의 type('click', 'keydown' , 'contextmenu')의 이벤트 핸들러를 적용 못하도록 막는 메소드이다.
○ 보통 사용 패턴 :
해당태그 .addEventfunction( event.type , function (event) ){
event.pretendDefault() //1_ 막기
alert("막았어 병신아") // 2_ 막혔다고 알림 경고창 출력 메소드
}
#Default 상황 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<a id="link" href="https://www.codeit.kr/">Link</a>
<input type="checkbox" id="checkbox">
<input type="text" id="input" placeholder="input">
<p id="text">
I Love Codeit!
</p>
<script src="index.js"></script>
</body>
</html>● 실습 1 : JavaScript 코드로 Link를 왼쪽 마우스 클릭을 할 시 , href 링크로 이동되지 않아지고, "꺼져"라는 알림창 출력하게 하기
const link = document.querySelector('#link');
link.addEventListener('click',function(event){
//1. 막기
event.preventDefault();
//2. 알람창
alert('꺼져');
});
● 실습 2 :
- checkBox가 checked가 되어있지 않으면, input창 입력 X
- checkBox가 checked 되어있고, input창에 키보드 입력시 , 텍스트 색깔 빨간색으로 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
<style>
.done{
color:red;
}
</style>
</head>
<body>
<a id="link" href="https://www.codeit.kr/">Link</a>
<input type="checkbox" id="checkbox">
<input type="text" id="input" placeholder="input">
<p id="text">
I Love Codeit!
</p>
<script>
const CheckBox = document.querySelector('#checkbox');
const Input = document.querySelector('#input');
Input.addEventListener('keydown', function (event) {
if (!CheckBox.checked) {
Input.value = "";
//event.preventDefault();
alert('체크박스 체크하고, 키보드 입력해 병신아');
setTimeout(function(){
event.value = "";
}, 0);
}
event.target.classList.add("done");
});
</script>
</body>
</html>● 실습 3 : 해당 웹페이지에서 오른쪽 마우스 클릭에서 메뉴창 안나오도록 하기 //Ctrl + c , v 방지
document.addEventListener('contextmenu',function(event){
event.preventDefault();
alert('복붙 하지마 시발련아');
});
'CodeIt_Sprint > JavaScript_중급' 카테고리의 다른 글
| (7)JavaScript중급_3_4_이벤트 위임 문제 , 해결방법은 if조건절 + event.contains() 메소드 (5) | 2024.11.13 |
|---|---|
| (6)JavaScript중급_3_3_이벤트 버블링과 이벤트흐름(DOM이벤트객체 경로과정) (1) | 2024.11.13 |
| (5)JavaScript중급_3_2_이벤트객체 (0) | 2024.11.13 |
| (4)JavaScript중급_3_1_이벤트핸들러 등록 (0) | 2024.11.13 |
| (2)JavaScript중급_2_DOM객체_개념부분(이론요약)[작성중..] (0) | 2024.11.11 |
