윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 67강 - jQuery로 이벤트 연결하기 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 67강 - jQuery로 이벤트 연결하기

페이지 정보

조회: 620

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3탄 67 강 되겠고

이번 강의에서는 16장에 있는 이벤트에 대해서 살펴보도록 하겠습니다
우리가 이전에 순수한 자바스크립트 만으로 바닐라 자바스크립트 만으로
이벤트를 다루는 방법을 배워 썼는데요
이번에는 제이쿼리 를 사용해서 이벤트 를 연결하는 방법에 대해서 살펴보게
됩니다
사실 이전 내용을 모두 알고 계시다면 이번 내용은 거의 껌 먹기 수준으로
쉽게 이해하실 수 있을 텐데요
간단하게 살펴보도록 하겠습니다 일단 이벤트 를 연결하는 방법을 수준으로
나타내게 되면 간단한 이벤트 연결 방식과 복잡한 이벤트 연결 방식이
있습니다
일단 간단한 이벤트 연결 방식부터 살펴 보도록 할게 염
예를 들어서 h1 을 선택을 하고 이 녀석을 클릭했을때 이벤트를 만들고
싶다면 클릭 이라는 메소드를 사용해 주시면 됩니다
클리지 라는 메서드는 크게 3가지 형태를 가지게 되는데요
자동완성기능 의 첫 번째 형태로 나오는 녀석은 트리거 더 클릭 이벤트
라고 나오는데 일대 트리거 란 이벤트를 강제로 배색을 시킨다 는
의미입니다
따라서 이 녀석을 실행을 하게 되면 클릭 이벤트를 자동으로 발생 시키게
되구요
이어서 두 번째 형태는 매개변수로 핸들러 이벤트 오브젝트를 넣게 되는데
핸들러는 우리가 일반적으로 이전에 살펴보았던 것처럼 이벤트 핸들러를
의미를 하고요 함수를 넣어달라는 이미 입니다
이때 이 함수의 매개 변수에는 이벤트 오브젝트 이벤트 객체가 들어간다는
의미입니다
따라서 총선을 입력을 하고 매개변수로 이벤트를 입력을 해 주시고 사용을
해주시면 클릭 이벤트 핸들러를 h1 태그의 연결하게 됩니다
이어서 3번째 형체를 보게 되면
첫 번째 매개 변수의 이벤트 데이터로 n 이라는 것을 넣게 되고 두 번째
매개변수로 핸들러를 넣게 됩니다
이때 핸들러에 형태는 우리가 기존에 살펴보았던 녀석과 같은데요
뭐 데이터를 예를 들어서 간단하게
100 이라는 숫자로 넣고 이벤트를 연결 해 보도록 하겠습니다
어쨌거나 제이쿼리 이벤트 핸들러 는 표준 이벤트 핸들러 처럼 한번에
여러개 이벤트를 연결을 할 수 있습니다
따라서 현재 코드를 살펴 보게 되면 이벤트를 2번 연결하고 있죠
따라서 이벤트 핸들러가 2개가 연결이 될 겁니다
일단 위의 틀과 하는 부분은 제거 하도록 하고요 h1 태그를 클릭을 할때
간단하게 n 얼얼 주로
안녕하세요 라는 글자를 출력해 보도록 하겠습니다
이벤트 핸들러가 2개가 연결이 되었고 첫번째 걸 a 라고 부르게 있고
두번째 걸 b 라고 부르도록 하겠습니다
이러한 형태로 연결을 하게되면 연결한 순서대로 이벤트 핸들러가 호출됩니다
코드를 저장하고 실행해 보도록 하겠는데요
헬로 를 누르게 되면 안녕하세요 a 를 출력을 하고 안녕하세요 b 라는
걸 출력하는 모습을 확인할 수 있습니다
어쨌건 이벤트 를 연결하는 가장 간단한 형식의 대해서 알아봤는데요
이제 이벤트 개체에 대해서 알아보도록 하겠는데요
이벤트 객체는 우리가 이전에 설명했던 것처럼 이벤트와 관련된 정보가
들어있는 저서 기 라고 할 수 있겠습니다
자동 완성 기능이 지원되기 때문에 이벤트 하고 점 을 입력을 하게 되면
모습 3 x 라던지 페이지 x 라던지 키 코드 라던지 r 특히 라던지
하는 다양한 이벤트 속성들이 들어 있는 모습을 확인할 수 있습니다
이벤트 객체의 속성을 활용하는 방법은 이후에 자세히 알아보도록 하겠 고용
결단 중요한 몇 가지만 살펴보도록 하겠습니다
일단 첫 번째로 중요한 녀석은 이벤트를 발생시킨 객체를 의미하는 커 렌트
타 계십니다
이녀석을 출력을 하게 되면 h1 태그를 클릭을 했을때 h1 태그가
출력되는 모습을 확인할 수 있습니다
간단하게 코드를 저장을 하고 실행해 보게 되면 헬로 를 클릭을 했을때
오브젝트 html 헤딩 엘레멘트 가 출력되는 모습을 볼 수 있습니다
따라서 이 녀석을 제이쿼리 어
메서드의 매개 변수를 넣게 되면 내부에 있는 html 을 클릭 이라는
형태로 변경을 할 수 있게 됩니다
이렇게 저장을 하고 실행 한지 클릭을 하게되면 헤딩 1 멘트 라는걸
출력을 하게 되고 확인 을 눌렀을 때 클릭으로 변경되는 모습을 볼 수
있습니다
우리가 이전에는 이벤트 핸들러 내부에서 디스 키워드가 자기 자신을
의미한다. 그랬는데요
지스쿼드 도 사용할 수 있습니다 살아서 디스 와 이벤트 점 커 렌트 타계
씨 같은 의미를 가진다 라고 생각을 해 주시면 되겠는데요 뭐 예를 들어서
css 를 사용해서 칼날을 레드 로 변경을 해 보도록 하겠습니다
경고창 출력 부분은 제거를 하도록 하겠구요 어쨌거나 이런 형태로 코드를
작성을 하고 저장하고 다시 실행해 보게 되면 헬로 를 클릭을 했을때
글자도 바뀌고 붉은 색으로 변경 되는 모습을 확인할 수 있습니다
사실 예전에는 디스 만 사용하고 이벤트 점 커런트 타겟을 완전히 무시하고
뭐 강인한 뭐 그런 수업들이 진행이 되었었는데요
최근에는 에로 봉선화 설피 암소가 등장하면서 이벤트 점 커 렌트 타듯이
약간 중요해졌다 고 볼 수 있는데요
이벤트 점 토렌트 타 dc 왜 중요해 졌는지 와 관련된 내용은 이후엔
조금 더 나아가게 에서 다시 설명하도록 하겠구요
일단 이벤트를 발생시킨 객체를 찾을 때는 이벤트 점 카렌트 타겟과 디스
키워드를 사용한다. 고 기억을 해 주시면 좋겠습니다
이어서 이벤트 객체와 관련된 중요한 속성은 바로 데이터 속성입니다 데이터
속성 안 지금 보이실 때 요 두 번째 방법에서 100 이라고 입력을 했을
때 요녀석을 의미를 하게 되는데요
예를 들어서 이벤트 점 데이터를 출력을 하게 되면 저 100 이라는
녀석을 출력을 하게 됩니다
하번 코드를 저장을 하고 실행해 보도록 하겠습니다
코드를 실행한 뒤 헬로 를 클릭을 하면 100 이라는 녀석을 출력하는
모습을 볼 수 있는데요
이때 배관 데이터로 전달한 녀석이라고 생각을 해 주시면 됩니다 이게 왜
중요하냐 고 생각할 수 있는데요
이벤트를 연결을 할 때 뭐 데이터를 다양한 형태로 객체로 사용을 하게되면
이벤트를 식별할 수 있는 다양한 코드를 작성할 수 있게 됩니다
이벤트 를 식별하기 위해서 데이터를 사용하는 방법 이외에도 굉장히 많은
방법들이 있는데요 식별하는 방법 중의 하나라고 기억을 일단 해주시면
좋겠습니다
이와 관련된 내용도 이후에 예제들을 만들어보면서 이벤트를 식별 해서 무엇
하는지에 대해서 살펴보도록 하겠습니다
어쨌거나 간단한 형태도 불러 놓도록 하겠구요 세 번째로 중요한 여성은
바로 우리가 이전에 알아보았던 기본 이벤트 제거와 이벤트 프로 팍 에이션
제거 라고 할 수 있습니다
예를 들어서
a 태그로 설정을 하고 hls 를 http
1 b 점 co 점 k 알로 이동한다.고 가정을 해봅시다
이렇게 가정을 했을때 a 태그를 클릭을 하면
화면 이동을 하게 점 한번 저장을 하고 실행을 해보도록 하겠습니다
헬로 를 클릭을 하게되면 한빛미디어 에 사이트로 이동하는 모습을 볼 수
있는데요
만약 이때 이벤트 점 프리 이벤트 디폴트 라는 녀석을 사용하게 되면 기본
이벤트가 제거가 됩니다 따라서 a 태그를 클릭을 해도 변화가 없을 겁니다
코드를 저장을 하고 실행해 보도록 하겠습니다
실행을 하고 헬로 를 누르면 어떠한 변화도 일어나지 않는 모습을 볼 수
있는데요
요렇게 프리 벤트 디폴트 를 사용해서 기본 이벤트를 제거 한다.고 생각을
해 주시면 되겠습니다
추가적으로 이벤트 프로포즈 이션 제거도 살펴보도록 하겠는데요
예를 들어 바디 태그 를 클릭을 했을때
자기 자신의 css 에
백그라운드로 칼날을 뭐 오렌지 로 변경을 해 보도록 하겠습니다
저장을 하공 실행을 하게 되면 기본 상태에서는 2 a 태그를 클릭할 때
바디 태그가 이 뒤에 있기 때문에
바지 태그 에도 클릭 이벤트가 적용이 되서 바지 태그의 백그라운드 칼라
가 오렌지 로 변경되는 모습을 확인할 수 있습니다
이렇게 이벤트가 백그라운드로 투과되는 것을 막기 위해서는 이벤트 전달을
막기 위해서는 스타 프로 퍽 에이션 이라는 메서드를 사용 하게 됩니다
스타 프로 오케이션 이라는 녀석을 사용을 하게되면 이벤트가 뒤로 전달되지
않게 되므로 a 태그를 클릭을 해도 배경색이 변경되는 일은 없을 겁니다
물론 바지를 그냥 클릭을 하게되면 백그라운드 색상이 병정 되긴 하겠지만요
추가적으로 이 두가지는 너무 많이 사용되기 때문에
제이쿼리 는 내부적으로 리턴 펄서 라는 코드를 사용 했을 때 이 두
가지를 자동으로 먹여 주게 됩니다
한번 리턴 벌써 를 입력을 하고 코드를 저장한 뒤에 실행해 보도록
하겠습니다
실행을 하게 되면 요렇게 코드가 나오게 되는데요
헬로 라는 녀석을 클릭을 했을때 프리 이벤트 디폴트 도 적용이 되어 있고
스타 프로 플레이 전도 적용이 되어서 배경 색상이 변경되지 않는 모습을
확인할 수 있습니다
굉장히 자주 사용되는 코드 이기 때문에 두 가지를 모두 다 기억을 해
주시면 좋겠습니다 그럼 지금까지 간단한 이벤트 연결 방식에 대해서
살펴보았습니다
일단
뭔가를 입력을 하공 진짜 머리 입력을 하고 클릭 이라던지
더블클릭 이라던지 를 사용하게되면 이벤트를 연결할 수 있다는 점을 기억을
해 주시면 좋겠습니다
어쨌거나 이벤트 의 세부적인 내용은 입니다 살펴 보았기 때문에 어려운
이벤트 방식도 뭐 무리없이 이해를 하실 수 있을 거라고 생각을 합니다
뭐 어려운 방법이라고 해도 전혀 없지는 않은데 용
a 를 입력을 하고 온 이라는 녀석을 사용해서 이벤트 를 연결하는 것을
복잡한 이벤트 연결 방식 또는 어려운 이벤트 연결 방식 이라고 이야기를
하는데 이 녀석을 입력을 하게 되면 첫 번째 매개 변수의 스트링으로
이벤트 이름을 입력을 하게 됩니다
클릭을 연결한다.면 클릭 을 써주시면 되겠구요
두 번째 매개 변수로는 쏭 션을 넣어줘서 이벤트 핸들러를 똑같이 연결을
해주시면 됩니다
이 방식이 이벤트 연결을 사용할 때는 뭐 마찬가지로 클릭 뒤에다가
데이터를 넣어 섬 데이터도 전달을 해 주실 수 있구요
저렇게 문자를 사용하는 방법 이외에도 객체를 사용해서 한번에 여러개
이벤트를 입력을 해 줄 수도 있습니다
예를 들어서 클릭 을 사용하면 클릭도 한방이 먹일 수 있고
더블클릭을 입력을 하게 되면 더블클릭 이벤트 도 먹일 수 있고
마우스 엔터 이벤트를 먹이게 되면 마우스 엔터 이벤트도 온 이라는 메쏘드
하나로 모두 적용을 할 수 있습니다
이렇게 코드를 작성할 하고
뭐 자기 자신의
html 변경을 해 보도록 할게요
뭐 사실 클릭 이벤트를 2개를 연결을 했지만 두 개 모두 자신이 내부의
글자를 병정 하는 거기 때문에 큰 의미는 없겠지만 이렇게 코드를 입력을
하고 저장하고 실행해 보도록 하겠습니다
코드를 실행하게 되면 잠깐 h1 태그로 바꿔서 글자가 잘 보이도록 할게요
이어서 요 녀석들도 바꿔주고 요
저장을 하고 다시 실행을 해 보게 되면 h1 태그가 나오는 모습을 볼 수
있구요
마우스 가 엔터 들 때 마우스 엔터 클릭하면 n 클릭
더블클릭하면 더블 클릭이 나오는 모습을 볼 수 있습니다
이 안에서 의 이벤트 x 사용법이나 뭐 풀 이벤트 디폴트 나 스타 프로
포메이션은 모두 똑같기 때문에 똑같은 형태로 사용하실 수 있습니다
어째 커는 이렇게 온 형태로 사용할 때는 약간 특이한 형태의 코드를
사용할 수 있는데요
간단하게 코드를 변경을 해 보고 알아보도록 하겠습니다
일단
h1 을 클릭을 할때
h1 태그를 하나 만들어서
뭐 내부 html 을 마찬가지로 헬로 로 주구
어펜드 토 밭 이라고 입력을 해 보도록 하겠습니다
이렇게 입력을 하고 코드를 실행을 하게 되면 헬로 라는 녀석의 나오고 이
녀석을 클릭을 하면 헬로 라는 글자가 계속 출력되는 모습을 확인할 수
있습니다
참고적으로 제이쿼리 의 요 선택 메쏘드 가진 경우에는 이걸 선택하는
시점에 있는 여성만 선택을 하게 됩니다
따라서 이걸 실행할 때는 a1000 태그가 하나밖에 없죠 그래서 이 h1
태그 하나에만 이벤트를 적용을 하게 됩니다
따라서 첫번째 녀석을 클릭하면 요 헬로 라는 글자가 늘어나는 모습을 볼
수 있지만 다른 녀석의 는 이벤트가 연결되지 않은 상태이기 때문에 클리
그래도 아무런 변화가 없는 걸 확인할 수 있습니다
그래서 일반적으로 이러한 이벤트 핸들러를 변수를 빼고
요 핸들러를 연결을 해주고
뉴 html 객체를 생성할 할 때도
클릭 이벤트 핸들러 로 핸들러를 지정을 해서 이러한 문제를 해결하기도
하는 대형
한번 이렇게 코드를 입력을 하고 실행을 해보도록 하겠습니다
실행을 하면 헬로 를 클릭할 때 헬로 가 추가가 되고 이 녀석을 클릭을
해도 새로운 녀석들이 계속 생성되는 모습을 확인할 수 있습니다
어쨌거나 굉장히 많이 사용되는 코디에요 예를 들어서 우리가 페이스북 같은
데서 모바일앱을 드레그해서 내리다 보면 계속해서 창이 추가가 되죠
그렇게 추가되는 그런 것들도 이러한 형태로 계속해서 이벤트 핸들러를 다시
연결 해 줘야지 클릭 이벤트 같은게 걸리게 됩니다
그런데 이렇게 자주 사용되는 것을 핸들러를 계속 연결을 하게 되면 따로
따로 관리 하기가 굉장히 복잡한 되요
그래서 제이쿼리 개발자들의 생각을 해보다 보니까 h1 태그의 이벤트 를
연결하는 게 아니라 바지 태그의 이벤트 를 연결해 보이고
바디 태그 를 클릭을 했을때 그 녀석이 h1 태그를 하면 그 h1 태그를
클릭했을때 호출을 하면 되지 않냐 라는 요러한 형태를 생각을 하게
됐습니다
요러한 형태로 코드를 작성을 하게 되면 래쪽에 있는 코드를 재현을
할 수 있는데요
바지 태그 를 클릭했을때 클릭한 녀석이 h1 태그 라면
요 이벤트 핸들러를 실행 한다. 라는 형태 라고 생각해주시면 되겠습니다
코드를 저장을 하고 실행해 보도록 할게요
실행을 하게 되면 헬로 라는 글자를 출 클릭을 했을때 헬로 가 하나 더
출력되는 모습을 볼 수 있고요
이 추가된 녀석을 클리 그래도 별도의 이벤트 핸들러 연결 없이 헬로 라는
글자가 계속 출력되는 모습을 확인할 수 있습니다
어쨌거나 이 때 굉장히 주의해 주셔야 되는 점이 있다면 우리가 h1
태그를 클릭하고 이벤트 핸들러 연결을 쉽게 하는 형태의 코드를 이렇게
작성을 한 것이기 때문에 쉽게 사용할 수 있게
내부에서의 디스 키워드는 h1 태그를 림 일을 하게 됩니다
한번 디스 라고 입력을 하고 티스 html 을
뭐 클릭 이라고 변경해 보도록 하겠습니다
이렇게 코드를 저장을 하고
실행을 하게 되면 헬로 라고 일단 출력이 되고요
이녀석을 클릭하게 되면 오브젝트에 html 헤딩 엘리먼트 라고 실력이
되서 h1 태그가 디스 키워드에 들어갔다는 걸 볼 수 있습니다
어쨌거나 추가적으로 지스 에 html 을 클릭 이라고 병종 했기 때문에
글자가 클릭 이라고 변경되는 모습을 확인할 수도 있습니다
어쨌거나 제이쿼리 에서 이벤트를 사용하는 기본적인 방법에 대해서
살펴보았는데요 책을 보시게 되면 인피티니 스크롤 무한 스쿨을 구현이 나
않는 트위터 처럼 글자를 입력 을 했을 때 글자 수에 제한을 거는 등의
활동이나 아니면은 뭐 그림을 그린다 던지 않은 간단한 예제가 나와
있는데요 이와 같은 내용은 일단 한번 읽어보시고 우리 강의에서는 이후에
애니메이션과 그리고 문서 객체를 세부적으로 선택하는 방법 그리고
플러그인을 배운 다음에 다시 살펴보도록 하겠습니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.