Front-End/JavaScript

[JavaScript] 이벤트 핸들링 (등록, 삭제, 브라우저 기본 동작 제어)

시니철 2024. 9. 9. 16:20

이벤트 핸들러 등록

HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addElementListener('type', 'handler')를 통해서 이벤트 핸들러를 등록 가능하다.

// HTML 속성 사용 예시
<button onclick="alert('Button clicked!')">Click</button>
// DOM 프로퍼티 사용 예시
<button id="myBtn">Click</button>
<script>
  var btn = document.getElementById('myBtn');
  btn.onclick = function() {
    alert('Button clicked!');
  };
</script>

이벤트 핸들러 삭제

addEventListener 메소드를 활용하여 이벤트 핸들러를 등록했다면, Element.removeEventListener('type', 'handler')를 통해서 이벤트 핸들러 삭제 가능하다.


브라우저 기본 동작

브라우저 기본 동작인 마우스 오른쪽을 클릭하면 상황에 맞는 메뉴 창이 뜨거나, input태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력되는 것을 preventDefault 메소드로 막을 수 있다.

하지만 HTML 태그들이 가지고 있는 고유한 역할과 의미를 훼손하게 될 수 있기 때문에 사용에 주의해야 한다.


이 글은 내용을 축소하여 정리한 것으로 일부 정보가 누락되었을 수 있음.