JavaScript에서 기본 동작 취소하기

때때로 JavaScript를 사용하여 태그의 기본 동작을 취소해야 할 때가 있습니다. 예를 들어, 링크를 클릭했을 때 해당 링크로의 이동을 취소하는 경우입니다. 일반적으로 이런 작업은 단순히 어떤 코드를 실행하기 위해 그 링크를 사용할 때 필요합니다. 이 경우 링크를 클릭하면 해당 링크로 이동한다는 사실은 전혀 필요하지 않습니다.

기본 동작 취소는 Event 객체를 사용하여 수행됩니다. 이를 위해 이 객체에는 특별한 메서드 preventDefault()가 있으며, 이 메서드는 이벤트 핸들러 내 어디에서나 호출하면 됩니다.

실제로 시도해 봅시다. 다음과 같은 링크가 있다고 가정해 보겠습니다:

<a href="/" id="elem">링크</a>

링크를 클릭했을 때 다른 페이지로 이동하지 않도록 만들어 보겠습니다:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	event.preventDefault();
	console.log('이 링크로 이동할 수 없습니다!');
});

링크들이 주어져 있습니다. 링크를 클릭했을 때, 해당 링크의 href가 그 링크의 끝에 기록되고, 링크로의 이동은 발생하지 않도록 만드세요.

두 개의 입력 필드(input), 하나의 단락(p), 그리고 하나의 링크(a)가 주어져 있습니다. 입력 필드에는 숫자가 입력된다고 가정합니다. 링크를 클릭했을 때, 입력된 숫자들의 합이 단락에 기록되도록 만드세요.