e(event).preventDefault
-
a태그나 submit태그를 사용하면 href를 통해 이동하거나 창이 새로고침하여 실행되는데, 이러한 동작을 취소하는 데 사용된다.
-
preventDefault와 비슷한 기능을 수행하는 return false와 stopPropagation도 같이 알아두면 좋다.
return false
- 이벤트 핸들러 내에서 호출되면, 이벤트 전파를 막고 기본 동작을 취소
e.preventDefault와 return false 차이점
- e.preventDefault
- 사용자 정의 동작에서 명시적으로 호출
- 다른 코드 블록에서 이벤트를 사용하거나, 이벤트 리스너 외부에서 사용
- return false
- JQuery 이벤트 핸들러에서만 사용 가능
return false를 사용하면e.preventDefault()와 함께 이벤트 전파를 막는다. 즉,e.preventDefault()이벤트의 기본 동작을 막는다.
일반적으로
e.preventDefault()사용하는 것이 더 명시적이며, 필요한 경우에만 사용하는 것이 좋다.return false는 JQuery에서만 동작하므로 JS에서는e.preventDefault()를 사용해야 한다.
e.preventDefault, return false 예제
- HTML에
onclick="event.preventDefault();"또는
onclick="return false;"를 적용해 이벤트 전파를 막을 수 있고, - HTML에 클래스를 만들어 JS에 함수를 생성해 함수 안에 실행 코드로
e.preventDefault();
또는return false;를 적어 전파를 막을 수 있다.
stopPropagation
e.stopPropagation은 상위 엘리먼트에 이벤트가 전달되지 않게 막아 준다.
- 해당 영역 공간을 선택하면서 console을 보면 좀 더 이해가 갈 것이다.
alert, confirm
- alert - 알림창
- confirm - 확인창 확인/취소
alert
alert("문구")- ("")안에 들어가는 문구가 알림창에 뜬다.
- 확인 버튼을 누르면 닫힌다.
confirm
confirm("문구")- ("")안에 들어가는 문구가 확인창에 뜬다.
- 확인 클릭 -> true
- 취소 클릭 -> false
