event.preventDefault()
- 요소의 기본 이벤트 동작을 취소하는 메소드
- 용도
- a태그를 눌렀을 때 페이지 이동되지 않도록 할 경우
- form 내 submit 동작을 막아야 할 경우 -> 입력한 값 유효성 검사
form 내 submit 기능을 막고 결과가 나오도록 구현
마우스 이벤트에서 우클릭을 막기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>더하기 연산</h1>
<p>5 + 7 = ?</p>
<form name="frm" onsubmit="return false">
정답입력: <input type="text" name="answer">
<input type="submit" name="btn" value="확인">
</form>
<script>
let answer = document.frm.answer;
let btn = document.frm.btn;
answer.addEventListener('keydown', (event)=>{
// Enter키를 눌렸을 때 정답을 확인하는 조건
if(event.key === 'Enter') {
console.log(event);
if(event.target.value === '12') {
alert('정답~~')
}else{
alert('오답~~')
}
}
});
// btn.addEventListener('click', (evet) => {
// console.log(evet);
// evet.preventDefault()
// });
// 우클릭 방지
// 사용자의 인터렉션에 따른 메뉴 설정
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
alert('우클릭방지');
})
</script>
</body>
</html>event.key or event.keyCode : 키보드를 입력했을 때, 키 또는 아스키코드 반환
event.preventDefault() : 기본 이벤트 동작 취소 메소드
event.target : 이벤트가 발생한 요소 반환
개발자