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

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 56강 - 고전 이벤트 모델

페이지 정보

조회: 583

본문

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

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

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

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

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

56강 되겠구요 이번 강의 부터는 11장에 있는 이벤트에 대해서
살펴보도록 하겠습니다 일단 이벤트에는 크게 4종류가 있는데요 첫번째는
고전 이벤트 모델 그리고 두번째는
인 라인 이벤트 모델이 있구요
이어서 인터넷 익스플로러
이벤트 모델과
표준 이벤트 모델이란 것들이 있습니다
일단 여기에서 우리가 강의에서 살펴볼 내용은 고전 이벤트 모델 그리고
2인 라잇 이벤트 모델 조금 그리고 다음 강의에서는 표준 이벤트 모델에
대해서 살펴보도록 하겠습니다
인터넷 익스플로러 이벤트 모델은 책의 나오지만 강의에서 살펴 보지
않는데요
이유는 인터넷 익스플로러 를 지원하기 위해서는 대부분 제이쿼리 를
사용하게 됩니다
따라서 인터넷 익스플로러 모델을 직접 만질 일은 거의 없거든요 그래서 이
내용은 생략하고 이 세 가지에 대해서만 살펴보도록 하겠습니다
넘 고전 이벤트 모델 부터 살펴보도록 하겠습니다
일단 지금 화면과 같이 h1 테크가 1 있을 때 그리고 여기에 id
속성이 부여가 되어 있을 때
뭐 아이디를 헤더 라고 주도록 할게요
헤더 라고 되어 있을 때 우리는 요녀석을 가져올 때
진 안까지 의 강 의해서 도큐먼트 점 갯 엘리멘트 vid 등을 사용한다.고
배웠습니다
그래서 요 녀석을 헤더 등이 변수에 집어넣을 수 있게 되는데요
헤더를 입력하고 점을 찍었을 때 본 으로 시작하는 속성들이 있습니다
오너 볼트 라던지 아니면 조금 더 이야기 쉬운거 안온 클릭 모은 카피 온
커맨드 온 체인지 온 캠 플레이 온 더블 클릭
뭐 본 죄고 벌 온 드랙을 이르 문틀에 그 스탈 트 온 드롭 뭐 이런
다양한 것들이 있는데요
이렇게 원 으로 시작하는 속성들이 모두 이벤트 속성 이라고 부르는 속성
드립니다
이러한 속성 들에는 함수를 저장하게 되는 데요
예를 들어서 온 클릭을 입력을 하게 되면 여기에다가 함수를 입력을 하게
됩니다
함수를 입력을 하게 되면 이 헤더 라는 녀석을 온 클릭했을때 클릭했을 때
이 함수가 실행이 되게 됩니다
용어를 잠깐 정리하고 넘어가게 되면 요 이때 해당하는 지금까지 배웠던
것처럼 문서 객체 라고 부르게 되구요
이 안에 있는 속성 중에 이벤트와 관련된 속성을 우리가 이벤트 속성
이라고 부르게 됩니다
그리고 그 이벤트를 클릭을 했을때 실행이 되었을 때 실행되는 함수를
이벤트 리스 나 또는 이벤트 핸들러 라고 부르게 됩니다 어쨌거나 온 클릭
이라는 이벤트 속성은 클릭을 할때 발생하는 녀석이 되겠습니다
클릭을 했을때 예를 들어서 얼얼 뚜루
안녕하세요 라는 문자열을 한번 출력해 보도록 하겠습니다
저장하고 실행하게 되면 지금 화면처럼 h1 테크가 하나가 나오게 되는데요
이 녀석을 클릭을 해주시면 지금 화면처럼 얼얼 주로 안녕하세요 라는 문자
이를 뜨게 됩니다
이벤트 라는 것은 요러한 식으로 사용하는 것인데
요런식으로 사용하는 형태를 우리가 고전 이벤트 모델 영어로는 페디 션 얼
이벤트 모델 이라고 부르게 됩니다
어쨌거나 이러한 온 클릭 같은 경우에는 사실 일종인 함수를 그냥 집어
넣은 속성 이기 때문에
강제적으로 호출을 할 때 헤더 점
본 클릭하고 괄호를 열고 다 드셔서 바로 실행 하실 수도 있습니다
뭐 많이 사용되지는 않지만 일부 경우에 이벤트를 같이 강제 실행 하는
경우가 있기 때문에 이러한 녀석들은 11.5 저를 참고를 해주시면
되겠습니다
어쨌건 은 이벤트가 발생하게 되면 우리가 현실에서도 어떤 사건이 발생하게
되면 누가 언제 어디서 무엇을 어떻게 왜 라는 것들이 나오게 되는데요
자바스크립트 에서도 마찬가지로 이벤트가 발생하면 누가 이벤트를 발생을
시켰는지 그리고 그 이벤트와 관련된 추가적인 정보를 전달을 받을 수 있게
됩니다
일단 누가 이벤트를 발생시켜 있는지는 내부에서 지스트 라는 키워드를
사용하면 알 수 있습니다
헤더 점 클릭에 이벤트 핸들러에서 디스 라는 키워드를 사용을 하게 되면
이녀석은 이벤트를 발생시킨 객체 헤더를 의미하게 됩니다
따라서 디스 점 스타일 점
칼날을 예를 들어서 레드 중 레드 등 으로 변경을 하게 된다면 코드를
저장하고 실행을 했을 때 헬로 월드 를 클릭했을때 색상이 붉은 색으로
변한 모습을 확인할 수 있습니다 그걸 활용하게 되면 예를 들어서 도큐먼트
크리에이트
엘리멘트 로 h1 태그를 형성을 하고
헤더의 인어 html 에다가 방금처럼 헬로 월드 라는 녀석을 집어 넣었을
음 도큐먼트 점 바디 에다가
어펜드 해주도록 하고요 이녀석을 후 반복문 등으로 여러개를 만들어 쓸
때도 각각의 녀석들의 이벤트를 9분을 할 수 있게 됩니다
예를 들어서 이렇게 코드를 구성을 하고
실행하게 되면 열기가 나오게 되는데요 사실 첫 번째는 이벤트 연결을 안
했으니까 이벤트가 발생한 하고 두번째 있는 6부터 클릭을 하게되면 클릭한
녀석들의 색상만 변경되는 것을 확인할 수 있습니다
따라서 요러한 형태로 디스 키워드를 사용한다. 라고 기억을 해 주시면
되겠습니다 어쨌거나 이벤트를 누가 발생시켜 있는지는 디스 키워드를
사용해서 할 수 있구요
이벤트와 관련된 추가적인 정보는 이벤트 핸들러의 매개변수 이벤트 를
사용해서 받을 수 있습니다
뭐 첫 번째 매개변수로 아무거나 입력을 하시면 되는데요
일반적으로 이벤트 라고 입력을 하거나 간단하게 이라고 입력을 하는 경우가
많습니다
어쨌거나 이 벤츠의 이를 찍고 점을 찍게 되면 굉장히 다양한 속성이
나오게 되는데요
예를 들어서 cf 특히 라고 되어 있는건 은 c f 키를 누르고 이
녀석을 선택을 했는지에 대해서 의미를 하게 되고
컨트롤키 난 마찬가지로 컨트롤 키를 누른 채로 뭔가를 했는지 알 특히 는
알트 키를 누르고 뭔가를 했는지 등을 의미를 하게 됩니다
마찬가지로 클라이언트 x 는 클라이언트의 x 위치 마우스 x 위치 라던지
클라이언트와 이 마우스의 y 위치 라던지 등을 모두 잡을 수 있는데요
요러한 속성을 제대로 활용하는 방법은 이후에 제이쿼리 를 보면서
알아보도록 하겠습니다
일단 지금 기억해 주실 거는 첫 번째 이벤트가 발생했을 때 이벤트 핸들러
내부에서 디스 키워드는 이벤트를 발생시킨 개체를 의미하며 이벤트 핸들러의
첫 번째 매개 변수에 넣은 이라는 변수는 이벤트와 관련된 추가적인 정보를
갖고 있는 녀석이다 라고 기억을 해 주시면 되겠습니다
어쨌거나 우리가 h1 테크 같은 경우에는 없지만 a 태그 같은 경우는
하이퍼 레퍼런스 속성이 지정이 되어 있을 때 클릭을 하면 이 녀석으로
이동하게 되는 기본적인 이벤트를 가지고 있습니다
이러한 기본적인 이벤트를 기본 이벤트 또는 디폴트 이벤트 라고 부르게
되는데요
우리가 상황에 따라서 이러한 이벤트를
막아야 되는 경우가 있습니다 예를 들어서 최근에는 spa 라고 해서 단일
페이지 애플리케이션 이라는 걸 많이 만들게 되는데요 이러한 애플리케이션은
html 페이지 1 에서 모든 여러 가이즈 페이지를 구현을 하게 되고 이
내부에 있는 a 태그를 클릭을 해도 실제로 웹페이지가 이동 되는게 아니라
화면에 있는 요소만 변경을 하게 됩니다 따라서 이러한 사이트를 구현을
하실때는 a 태그가 기본적으로 가지고 있는 디폴트 이벤트를 제거할 수
있어야 됩니다
뭐 요 상황과 관련된 내용은 뭐 이 책에는 나오지 않지만 이 강의
끝날때쯤 l2 액트 를 다루면서 다시 간단하게 살펴보도록 하겠습니다
어쨌거나 도큐먼트 점 걘 엘리멘트 바이디를 사용해서
그냥 커리 섹트 을 쓰도록 할게요
쿼리 셀렉터를 사용을 해서 a 태그를 들고 있고 이 녀석을 앵커 라는
이름으로 변수에 저장 하도록 하겠습니다
이어서 앵커 점 온 클릭을 했을때 이벤트 핸들러를 연결하도록 하겠는데요
일단 기본적인 이벤트가 어떠한 것인지 한번 눈으로 같이 살펴보도록 합시다
코드를 저장하고 실행을 하게 되면 a 태그로 told 이벤트 라는 녀석의
나오게 되는데요 이 녀석을 클릭을 하게되면 자동으로 하이퍼 레퍼런스
속성의 입력했던 네이버 쩜컴 이라는 사이트로 이동을 하게 됩니다
이렇게 링크를 클릭을 했을때 링크가 이동되는 것이 바로 dport
이벤트라고 할 수 있습니다 이러한 디폴트 이벤트를 제거할 때는
리턴 펄스 라는 것을 입력을 하게 되는데요
마지막 부분에서 리턴이 펄스 로 들어가게 되면 기본 이벤트 가 실행되지
않습니다
한번 코드를 저장을 하고 실행해 보도록 할게요
그리고 다시 링크를 클릭해 보도록 할텐데요 저 지금 클릭을 엄청나게 하고
있는건데 클릭을 계속하고 있는 건데도 실제로 페이지가 이동하지 않는
모습을 볼 수 있습니다
이는 리턴 펄스를 입력을 했기 때문에 a 태그가 가지고 있는 기본 이벤트
dport 이벤트가 제거 되었기 때문에 나타나는 현상입니다 살펴보는
개념들이 굉장히 많은데요
이벤트 속성 이벤트 핸들러 또는 이벤트 리스너 그리고
이벤트 리스너 내부에서 사용할 수 있는 디스 키워드 에이미와 이벤트 객체
그리고 기본 이벤트 dport 이벤트
그리고 이걸 막는 방법은 리턴 펄스 달하는 4가지에 대해서 알아보았는데요
한 가지 더 알아보도록 하겠습니다 일단 예제를 잠시 구성하도록 하겠는데요
스타일을 사용해서
모든 태그의
폴더를 3 픽셀 솔리드 블랙 을 적용해 주도록 하겠습니다
이어서 요 태그들을 약간 중첩 구성을 하도록 하겠는데요
div 태그를 하나 주고 이 녀석이디를
아우터 라고 좋겠고 안쪽에 하나 더 만들고 이 녀석의
id 는 이 너라고 주도록 하겠습니다
이어서 내부에 있는 h1 태그는 헤더 그대로 주도록 하겠구요
어쨌거나 이 상태로 코드를 실행하게 되면 지금 화면과 같이 조금 복잡한
구성이 나오는 것을 볼 수 있는데요
여기에다가 전부 한번 이벤트 를 연결해 보도록 하겠습니다
일단 도큐먼트 점 개다 엘리먼트 바이디로
아우터를 들고 오고 이 녀석의 온 클릭 을 정의해 주도록 하겠구요
요녀석을 복사를 해서 3개를 만든 다음에 인어의 도 온 클릭 그리고
헤더에 도 5는 클릭을 주도록 하겠습니다
이어서 각각의 녀석 내부에서는 디스의 스타일 점
백그라운드 칼라를 하나는 레드 루
그리고
1 난 그린으로 하나는 블루 로 설정하도록 하겠습니다
네드
그린 그리고
블루 까지 입력을 해 보겠 꼬 조금 더 예제를 확실하게 알아보기 위해
도큐먼트 점 바디에 동 온 클릭을 연결을 해성
자신의 백그라운드 칼라를
옐로우 로 변경해 보도록 하겠습니다 요렇게 코드를 저장을 하고 실행을
하겠는데요
실행을 하면 지금 화면처럼 나오게 되는데 h1 태그를 한번 클릭해 보도록
하겠습니다
그런데 h1 태그를 클릭을 할때 이 클릭 위치 에 걸려 있는 녀석들의
굉장히 많아요
당연히 뒤에 있는 div 태그 2개도 걸려 있을 것이고 바지 태그도 걸려
있을 것이고 html 태그 까지도 이 위치에 걸려서 클릭을 하면 클릭
이벤트가 전부 발생하게 됩니다
이런 것을 이벤트 전달이 라고 부르게 되는데요 이러한 이벤트 전달이
필요한 경우도 있지만 필요하지 않은 경우도 있습니다
예를 들어서 어쨌거나 지금까지 굉장히 많은 개념을 알아보았는데요
자시 한 번 정리를 하게 되면 어떠한 문 3 객체가 가지고 있는 속성
중에 이벤트와 관련된 속성은 이벤트 속성 이라고 부른다 그리고 그러한
이벤트 속성 에 넣는 함수를 이벤트 핸들러 또는 이벤트 리스너 라고
부른다
그리고 이벤트 리스너 또는 이벤트 핸들러 내부 해서 디스 키워드를 사용할
하게 되면 이 녀석은 문서 객체 이벤트를 발생시킨 문서 객체를 나타낸다
그리고 이벤트 핸들러에 첫 번째 매개 변수에 어떤 것을 넣게 되면
일반적으로 이벤트 나이를 사용을 하게 되는데 이 녀석을 활용하면 이벤트와
관련된 속성을 알 수 있게 된다
이어서 a 태그 라던지 아니면 써밋 버튼처럼 눌렀을 때 기본적으로 행위
찌는 동작이 있는 녀석 안 그런 것을 우리가 기본 이벤트 또는 디폴트
이벤트 라고 부른다
그러한 녀석을 제거 하고 싶으면 리턴 펄스를 사용을 한다.
그리고 마지막으로 이벤트 전달이 있는데 이벤트전 달이란 같이 어떤
이벤트가 일어날 수 있는 상황에 뒤에 있는 녀석들 까지 모두 이벤트가
일어나는 것을 말한다. 이러한 이벤트 전달을 막고 싶으면 이벤트 점 스타
프로 팍 에이션 이라는 메소드를 사용한다. 라고 5개를 모두 기억을 해
주시면 되겠습니다
사실 11장 이 굉장히 많은데 요 많은 내용을 굉장히 빠르게 설명을 한
거거든요 그래서 책의 내용을 읽으면서 간단하게 정리를 해 보시면 좋을
것이라고 생각을 합니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.