(9)인터렉티브_자바스크립트_event객체프로퍼티메소드 preventDefault() 메소드를 이용하여, 실습 3개 해보기(작성중)

코잼민 2024. 11. 29. 17:41

● Default 코드 , 출력 장면 :

- index.html

<!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>
  </script>
</body>
</html>

- 출력장면

● 실습 1 : JavaScript 코드를 이용하여, link의 링크 접속시, 접속기능은 안되고, "꺼져"라는 경고창 출력 //href 속성삭제 X

- 답 :

    const link = document.querySelector('#link');
    
    link.addEventListener('click',function(event)
    {
      event.preventDefault();
      alert('꺼져 병신아');
    });

● 실습 2 : checkBox 태그가 unchecked 되어있을 때, input 입력을 막고, "체크하고 입력해 병신아" 경고창 출력되도록 하기

- 답 :

    const inputNode = document.querySelector('#input');
    const checkBoxNode = document.querySelector('#checkbox');
    
    inputNode.addEventListener('keydown',function(event){
      if(!checkBoxNode.checked)
      {
        event.preventDefault();
        alert('체크박스에 체크하고, 입력해 병신아');
      }
    });

● 실습 3 : 웹페이지 창에서 우클릭 방지 코드 작성

- 답 :

    document.addEventListener('contextmenu',function(event){
      
      event.preventDefault();
      alert('복 붙 금 지 ㅋ');
    });

저작자표시 (새창열림)