클래식 이벤트
이번에는 HTML 파일에 버튼 태그를 생성하고 위 이미지와 같이 ID 값을 부여해 봅시다!
위와 같이 js 파일을 생성한 후 id 값을 가져와서 onclick 이벤트를 할당하고 버튼을 누른다.
상태 창에 “버튼 클릭”이라는 텍스트가 나타납니다!
이런 버튼이 생성되고 버튼을 눌렀을 때
이 상태 창이 나타나는 것을 볼 수 있습니다!
클래식 대 표준 이벤트의 장점
클래식/표준 이벤트의 일반적인 이점 중 하나는 제거할 수 있다는 것입니다.
요소 속성 아래의 on 이벤트 이름(이벤트 리스너) 속성에 함수 대신 null을 할당하여 이벤트를 삭제할 수 있습니다.
이전에 작성한 js 파일에 코드를 붙여넣어 어떻게 작동하는지 확인해 봅시다!
이렇게 코드를 작성하고 다시 실행하면 이전에 보여주었던 상태창이 한번 뜨게 됩니다.
JS가 한 줄씩 읽고 해석하기 때문에 그 이후에는 나타나지 않습니다!
두 번째 장점은 단일 요소에 여러 이벤트를 연결할 수 있다는 것입니다.
알아보기 위해 마우스를 올렸을 때 배경색을 빨간색으로 설정해 봅시다!
마우스를 놓으면 배경이 노란색으로 바뀌는 이벤트를 설정하자!
js 파일에 js 코드를 이렇게 작성하고 라이브 서버를 확인하면
마우스를 올려놓으면 첫 번째 이미지처럼 배경이 빨간색으로 바뀝니다.
마우스 버튼을 놓으면 배경이 노란색으로 변합니다.
클래식 이벤트 모델의 단점
클래식 이벤트 모델의 단점은 단일 요소에 대해 동일한 이벤트 수신기에 대해 여러 이벤트 핸들러를 작성할 수 없다는 것입니다.
다시 말해서!!! 이는 마지막으로 할당된 이벤트 핸들러만 적용됨을 의미합니다.
알아보기 위해 js 파일로 돌아가서 onclick 이벤트를 만들어 보겠습니다.
js 파일로 돌아가서 버튼을 눌렀을 때 상태창에 “new event handling method”라고 적으면
이전과 같이 “Button Clicked” 상태창이 뜨지 않고 아래 이미지와 같이 “New Event Handling Method”가 나타납니다!
따라서 이러한 단점으로 인해 대부분 클래식 이벤트 대신 일반 이벤트를 사용하고 있습니다!!