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 태그들이 가지고 있는 고유한 역할과 의미를 훼손하게 될 수 있기 때문에 사용에 주의해야 한다.


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