JS_이벤트 응용 2(고전 이벤트)

고전이벤트

이번에는 html 파일에 button 태그를 생성한 뒤 위의 사진처럼 id 값을 부여해보자!

 위와같이 js파일을 만들어 준뒤 id 값을 얻어와 onclick 이벤트를 부여하고 버튼을 누르면
상태창으로 "버튼이 클릭됨" 이라는 문자가 나타나게 된다!

이런 버튼이 생성되고 버튼을 누르면

이런 상태창이 뜨는것을 알 수 있다!

고전 이벤트와 표준 이벤트의 장점

고전/ 표준 이벤트의 공통된 장점 중 하나는 바로 이벤트 제거가 가능하다는 것이다.

요소의 속성중 on이벤트명(이벤트 리스너) 속성에 함수대신 null을 대입하면 이벤트를 삭제 할 수 있다.

적용한것을 보기위해서 아까 작성해 두었던 js 파일내부에 코드를 추가해 보자!

이렇게 코드를 작성하고 다시 실행해 보면 아까 나타났던 상태창이 한번 나타나고
그 뒤에는 나타나질 않는데 이것은 JS가 한줄 씩 읽고 해석해 주기 때문이다!

---

두 번째 장점은 하나의 요소에 여러 이벤트를 추가 할 수있다는 점이다.

이것을 알아보기 위하여 우리는 마우스를 올려놨을때 배경색을 빨간색으로!
마우스를 떼봤을때는 배경을 노란색으로 바꾸는 이벤트 설정을 해보자!

js 파일 안에 이렇게 js 코드를 작성해두고 라이브 서버를 확인해본다면

마우스를 올리면 첫번째 사진처럼 배경이 빨간색으로
마우스를 떼면 배경이 노란색으로 바뀌는 것을 알 수 있다!

---

고전 이벤트 모델의 단점

고전 이벤트 모델의 단점은 바로 한요소에 동일한 이벤트 리스너에 대한 다수의 이벤트 핸들러를 작성할 수 없다.

즉!!! 마지막으로 대입된 이벤트 핸들러만 적용이 된다는 것이다.

알아보기 위해서 다시 js파일로 돌아가 onclick 이벤트를 생성 해보자

js파일로 돌아가 버튼을 눌렀을때 상태창에 "새로운 이벤트 처리방법" 이라고 작성해두면
아까 처럼 "버튼이 클릭됨" 이라는 상태창이 뜨지 않고 아래 사진과 같이 "새로운 이벤트 처리방법" 뜨게 된다!

따라서 이와같은 단점 때문에 대부분 고전 이벤트보단 표준 이벤트를 많이 사용한다고 한다!!