addEventListener<이벤트 핸들러 어트리뷰트 (Event Handler Attribute)>

HTML 요소에 직접 이벤트 핸들러를 설정하는 방법을 의미합니다.

이 방법은 HTML 요소에 이벤트가 발생했을 때 자바스크립트 코드를 실행하는 데 사용됩니다.

예를 들어, 클릭 이벤트를 처리하는 경우를 살펴보겠습니다.

다음과 같이 HTML 요소에 "onclick" 어트리뷰트를 사용하여 클릭 이벤트 핸들러를 설정할 수 있습니다.

 

 

이벤트 핸들러 어트리뷰트 종류

1. onclick: 요소를 클릭했을 때 발생하는 이벤트를 처리합니다.
2. ondblclick: 요소를 더블 클릭했을 때 발생하는 이벤트를 처리합니다.
3. onmouseover: 마우스가 요소 위로 올라갔을 때 발생하는 이벤트를 처리합니다.
4. onmouseout: 마우스가 요소에서 벗어났을 때 발생하는 이벤트를 처리합니다.
5. onmousemove: 마우스 포인터가 요소 위에서 움직일 때 발생하는 이벤트를 처리합니다.
6. onmousedown: 마우스 버튼을 눌렀을 때 발생하는 이벤트를 처리합니다.
7. onmouseup: 마우스 버튼을 놓았을 때 발생하는 이벤트를 처리합니다.
8. onkeydown: 키가 눌렸을 때 발생하는 이벤트를 처리합니다.
9. onkeypress: 키가 눌렸다 떼어질 때 발생하는 이벤트를 처리합니다.
10. onkeyup: 키가 눌렸다 떼어질 때 발생하는 이벤트를 처리합니다.
11. onfocus: 요소가 포커스를 받았을 때 발생하는 이벤트를 처리합니다.
12. onblur: 요소가 포커스를 잃었을 때 발생하는 이벤트를 처리합니다.
13. onchange: 요소의 값이 변경되었을 때 발생하는 이벤트를 처리합니다.
14. onsubmit: 폼을 제출했을 때 발생하는 이벤트를 처리합니다.
15. onload: 페이지나 이미지 등이 로드되었을 때 발생하는 이벤트를 처리합니다.
16. onunload: 페이지가 언로드될 때 발생하는 이벤트를 처리합니다.
17. onerror: 문서나 이미지 등을 불러오는 동안 오류가 발생했을 때 발생하는 이벤트를 처리합니다.
18. onresize: 창의 크기가 조정될 때 발생하는 이벤트를 처리합니다.
19. onscroll: 요소가 스크롤될 때 발생하는 이벤트를 처리합니다.
20. oncontextmenu: 요소에서 컨텍스트 메뉴가 호출될 때 발생하는 이벤트를 처리합니다.

 

 

 

 

 

예시

<button onclick="handleClick()">Click me</button>

 

위의 예제에서 "onclick" 어트리뷰트는 버튼이 클릭되었을 때 "handleClick()" 함수를 호출합니다.

따라서 "handleClick()" 함수는 이벤트가 발생했을 때 실행됩니다.

이러한 방식은 간단한 작업에 유용할 수 있지만,

대부분의 경우에는 JavaScript 코드를 외부 파일로 분리하고 이벤트 리스너를 사용하여 이벤트를 처리하는 것이 권장됩니다.

이는 코드의 유지보수성과 가독성을 향상시키며,

HTML과 JavaScript의 분리를 유지하는 데 도움이 됩니다.

아래는 위의 예제를 이벤트 리스너를 사용하여 변경한 것입니다.

 

<button id="myButton">Click me</button>
<script>
    document.getElementById('myButton').addEventListener('click', handleClick);

    function handleClick() {
        alert('Button clicked!');
    }
</script>

 

이 방식은 HTML과 JavaScript 코드를 분리하여 관리하기 쉽게 해주며,

이벤트 리스너를 동적으로 추가하거나 제거하는 데 훨씬 유연합니다.

 

https://momomooo.tistory.com/51

.addEventListener() - 자바스크립트 내장메서드(함수)