JS_이벤트 응용 3(표준 이벤트)

오늘은 표준이벤트를 사용하여 위에 버튼 사진을 처음에는 아래 사진처럼 만들고

그 뒤 고전이벤트와 다른지 확인하기 위하여 또 아래 사진으로 변화 시켜줘 볼것이다!

처음엔 늘 해왔던것 처럼 html 파일에 코드를 작성해준다!

아래 사진과 같이 코드를 작성해준뒤 JS파일에 들어가 코드를 작성하여 두번째 사진처럼 스타일을 줄것이다.

이렇게 btn2 변수를 생성시켜준뒤 getElementById 함수를 사용해서 btn2 라는 아이디를 가져와서 
이벤트추가 함수를 작성해주면 된다

주석에서도 말했다 싶이 이벤트 핸들러 내부에 작성된 this는 이벤트가 발생한 요소를 불러오는 것이다.

이렇게 만들고 라이브서버를 통해 확인하면 아래 사진과 같이 변하는데 

고전이벤트와 다른점을 확인하기 위해서 다시 btn2에 클릭이라는 이벤트를 부여해볼것이다!

바로 아래에 작성해주고 실행시켜주면 고전이벤트는 아래 이벤트만 발생하지만 표준 이벤트는 위아래 모두 포함해서

이런 결과물을 만들어 낼 수 있다!