코드스테이츠 18일차
AMA라는 질문답변 시간에 엔지니어분의 노션을 보게되었다.
노력한 흔적이 고스란히 남아있던 노션이었다.
뭔가 보면서 크게 동기부여가되어서 나도 저렇게 공부해야겠다는
다짐도 하게되었던 좋은 시간이었다.
새로 배운 것들
DOM에서의 Event
DOM에서 Event란 어떤 행동이 실행됐을때 취하는 명령으로
예를들면 버튼을 클릭한다거나
어떤 이미지에 마우스를 올리는등에 행동을 취했을 때
실행되는 함수를 말한다.
DOM에 이벤트를 추가하는 방법
DOM을 이용해 이벤트를 추가하는 방법은 아래와 같다.
target.onevent = domFunction여기서 onevent에 직접할당할 행동을 넣으면 된다.
상당히 많은 event가 있기 때문에 이부분은 MDN을 참고하자
domFunction에는 행동이 입력됐을때 실행할 함수를 넣으면 된다.
이 방법외에도 한가지 더 존재한다.
addEventListener를 이용하면 된다.
target.addEventListener(type, listener)type에는 반응할 행동을 넣으면 된다.
역시 많은 이벤트들이 있기 때문에 MDN을 참고하자
listener에는 역시 행동이 입력됐을때 실행할 함수를 넣으며 된다.
함수를 인자로 받는 콜백함수인 것이다.
GlobalEventHandlers VS addEventListener
GlobalEventHandlers는 위에서 예시로 들었던
onevent를 이야기 하는 것이다.
그중 대표적인 속성인 onclick과
addEventListener를 비교해본다면 다음과 같다.
onclick은 하나의 이벤트에만 반응하는 함수를 만들수 있다면
addEventListener는 여러개의 이벤트를 쓸 수 있다.
addEventListener의 경우 세번째 인자를 통해
함수의 작동방식을 결정할 수 있다.
Bubbling, Capturing이라고 하며 기본값으로는 Bubbling이다.
onevent은 모든 브라우저를 지원하지만
(GlobalEventHandlers의 모든 이벤트가 모든 브라우저를 지원하는것은 아닙니다.)
addEventListener는 IE 9 이상만 지원합니다.
onclick의 사용방법
절대로 HTML에 직접적으로 사용하지 않도록만 하자.
이런식으로 사용하면 자바스크립트문서에서 사용할 수 없어
가독성이 떨어지게된다.
블로그 작성시 참고한 문서
앞으로는 작성할때 참고했던 문서들을 남겨놓기로 하였다.
MDN GlovalEnetHandlers
MDN EventTarget.addEventListener()
StackOverflow addEventListener vs onclick
StackOverflow Why is using onClick() in HTML a bad practice?
Wikipedia Unobtrusive JavaScript
