윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 58강 - 표준 이벤트 모델 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 58강 - 표준 이벤트 모델

페이지 정보

조회: 587

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임원 3탄

뭐 18강 되겠구요 이번 강의에서는 표준 이벤트 모델에 대해서 살펴보도록
하겠습니다
표준 이벤트 모델이란 것은 현재 표준으로 제정되어 있는 욕을 사용해 주면
좋겠다고 적용되어 있는 이벤트 모델이라고 생각을 해 주면 됩니다
다만 구버전의 인터넷 익스플로러에서는 표준이 멘트 모드를 동작하지 않기
때문에
구버전의 인터넷 익스플로러를 고려해야 되는 상황이라면 요거 를 사용할
수는 없습니다
그래서 이후에 살펴보게 되는 사실 j 커리가 그런 모든 것을 보완해 주기
때문에 제이쿼리 를 사용한다. 라고 생각해주시면 되겠구요
어쨌거나 간단하게 h1 태그의 이벤트 를 연결하는 모습을 보면서 표준
이벤트 모드에 대해서 살펴보도록 하겠습니다
이 이벤트 모델 같은 경우에는 사실 이후에 살펴보는 노트 2의 s 에서도
비슷한 형태로 사용이 되고 다른 라이브러리를 들도 대부분 이와 같은
형태로 사용하게 설계가 되었기 때문에 살펴보시고 기억해 주시면 굉장히 큰
도움이 될 거라고 생각을 합니다
어쨌거나 그럼 일단 h1 태그를 가져오도록 하겠구요 헤더 점
ad 이벤트 리스너 라는 메소드를 사용해서 이벤트를 연결을 하게 됩니다
지금 자동완성 기능이 너무 길어서 왼쪽으로 늘어 졌는데요 여길 보시게
되면 몸 클릭을 입력을 한다.던지 카피를 입력을 한다.던지 리셋을 입력을
한다.던지 스크롤 입력한다. 던지라고 되어 있습니다
이는 모두 고전 이벤트 모델에서 사용하던 6과 같다 고 할 수 있는데요
입력을 할때 반드시 앞에 있는 오늘 빼고 입력하셔야 된다는 걸 기억해
주시면 좋겠습니다
문자열로 클릭 이라고 입력을 해 주시게 되면 클릭 이벤트를 입력하는 게
되고요
펑션 을 사용을 해서 매개변수로 더 이벤트 핸들러를 지정을 하게 됩니다
사실 요렇게 보면 고전 이벤트 모델과 다 크게 다를게 없다고 생각할 수
있는데요
표준 이벤트 모델의 가장 큰 특징은 이벤트를 여러 개
실행할 수 있다는 겁니다 예를 들어서 요거를 복사를 해서
4번을 넣게 되면 이벤트 핸들러 4개가 차례대로 연결이 됩니다
코드를 저장하고 실행하면 h1 태그가 나오게 되는데요
이벤트 핸들러 4개가 연결돼 2점 그래서 클릭을 하면 경고창이
4번 실행되는 모습을 확인할 수 있습니다
그래서 표준 이벤트 모델과 기존 고전 이벤트 모델의 가장 큰 차이점은
이러한 형태로 이벤트 텐트 일러를 여러개 연결할 수 있다라고 기억을 해
주시면 되겠습니다
이벤트 를 제거하는 방법도 살펴보도록 하겠는데요 참고적으로
이전에 살펴보았던 고전 이벤트 모델의 이벤트를 제거를 할 때는 온 클릭을
그냥 널 등으로 주시게 되면 온 틀리기 아무것도 들어 있지 않게 되면서
이벤트 핸들러가 사라지게 됩니다
표준 이벤트 모델의 경우는 헤더 점 리 무브 이벤트 리스너를 사용해서
이벤트 리스너를 제공을 하게 제거를 하게 되는데요 이때 이 함수에 대한
이름이 있어야지 이벤트를 제거할 수 있게 됩니다
요 이름을 일반적으로 참조 라고 부르는 경우가 많구요
이렇게 되있으면 엣 이벤트 리스너를 사용을 해서 이벤트를 연결할 수
있으며 리 무브 이벤트 리스너를 사용을 해서 이벤트를 제거할 수 있습니다
저장을 하고
실행 해 보게 되면 이벤트를 연결하자 마자 곧바로 제거를 했죠 그래서 이
녀석을 클릭을 해도 어떠한 상황도 발생하지 않는 모습을 확인할 수
있습니다
어쨌거나 그럼 마지막으로 기본 이벤트 제거 방법과 이벤트 객체에 대해서
살펴보도록 하겠는데요
이 부분이 약간 다르기 때문에 기억을 해 주시면 좋겠습니다
일단 이벤트 객체 같은 경우에는 매개변수로 받는 녀석이 되겠구요
이녀석을 사용하면 머 스 터 프로브 스타 프로 팍 에이션 이라던지 않은
다양한 기능들을 확인할 수 있습니다
그리고 기본 이벤트를 제거를 할 때는
포리 이벤트 디폴트 라는 메서드를 활용하게 됩니다
리턴 펄스가 아니라 프리 펜트 디폴트를 사용을 한다.고 기억을 해 주시면
좋겠습니다
어쨌거나 이렇게 코드를 작성을 하고 저장을 한 뒤
실행을 해 보게 되면 클릭을 했을 때 어떠한 현상도 일어나지 않게 됩니다
어쨌거나 이 스타 프로 팍 에이션 이란 것과 프리 이벤트 디폴트가
사용하는 방법 이벤트 모델 받아 다르고
이후에 살펴보는 제이쿼리 도 달라요 그래서 꼭 정리를 하고 넘어가시면
좋겠는데 용 다시한번 정리를 해보면
이벤트 점
스타 프로 팍 에이션 이 기본이다 그리고
리턴 펄스를 하게 되면 기본 이벤트가 막힌다고 기억을 해주시면 좋겠구요
이후에 살펴보는 제이쿼리 같은 경우에는 뭐 요런식으로 입력을 하게 된
다음에
리턴 펄스를 하게 되면 두 가지가 전부 막히게 됩니다
그래서 이러한 차이점이 있다는 것들을 어느정도 기억을 해 주시면
좋겠습니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.