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

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

페이지 정보

조회: 558

본문

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

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

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

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

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

되겠구요
이번 강의에서는 인라인 이벤트 모델에 대해서 살펴보도록 하겠습니다
일단 프로그래밍 언어에서 인 라인 이라는 표현이 나오게 되면 어떠한 줄에
다가 뭔가 굉장히 큰 거를 뛰어 놓은 것을 의미 를 하게 되는데요
예를 들어서 인 라인 이벤트란 이렇게 이치원 태그가 있을 때 이 내부의
다가 굉장히 큰 기능 중 하나인 모군 클릭 이라던지 않은 이벤트를
부여하는 것을 의미를 합니다
우리가 지금까지 살펴보았던 것처럼 h1 태그가 있다면 도큐먼트 점
모커리 셀렉터를 사용해서
h1 태그를 가져올 수 있고 이것을 헤더 안에 다 넣은 뒤에 헤더 점
원클릭 을 사용해서 이벤트를 연결을 해 썼었는데요 이때 이 함수 내부에
이 기능을
여기에다 끼어 넣은 것을 바로 인 라인 이벤트 라고 부르게 됩니다
우리가 뭐 지금까지 hon 점 타이틀이 라든지 h 어쩜 뭐 다양한
속성들을 여기에서 곧바로 접근을 할 수 있었습니다
마찬가지로 반대로 a1 태그 에서도 온 으로 시작하는 이벤트 속성들을
사용할 수 있게 되는데요
번개 모양으로 되어 있는 모 버너 볼트온 불러온 캔 썰 웡 캠 플레이
등이 모두 다 있나 인 이벤트 속성 이라고 부르게 되며 이 내부에는
자바스크립트 코드를 입력을 하게 됩니다
예를 들어서 클릭할 때 얼얼 틀을 실행한 은 코드 같은 경우에는 우리가
뭐 펑션 을 넣고 안에다가 경고창을 출력하게 했는데요
마찬가지로 인라인 이벤트 둥 이 내부가 함수처럼 구현이 됩니다
따라서 이 내부의 다가 그냥 얼얼 즉 경고 라고 입력을 하면 됩니다
참고적으로 일대 따옴표는
일체를 시켜주셔야 g 이렇게 뭐 충돌 없이 사용할 수 있게 됩니다 범
고전 이벤트 모델로 연결하는 부분을 잠시 주석 처리 하도록 하겠구요
h1 태그 내부에 다가 간단한 글자를 넣어서 클릭할 수 있게 하도록
하겠습니다
저장을 하공
실행을 하게 되면 지금 화면처럼 헬로 라는 글자가 나오게 되는데요
요녀석을 클릭을 하면 인 라인 이벤트로 연결한 6기 실행이 되서 경고
라는 경고창이 출력되는 모습을 확인할 수 있습니다
뭐 이 내부의 다가 여러개를 입력하실 수 도 있어요
경고 경고 경고 라고 입력을 하게 되고 저장을 한 뒤 실행하고 클릭해
보게 되면 경고 경고 경고 가 출력되게 됩니다
엔터 로는 9분할 수 없지만 그러니까 줄바꿈 으로는 이녀석들을 갱을 해서
9분할 수 없지만 세미콜론 을 사용하면 9분을 할 수 있기 때문에 이렇게
세미콜론으로 연결을 하면 여러 개의 코드도 실행을 할 수 있습니다
추가적으로 우리가 지난 시간에 지 본 이벤트를 제거를 할 때는 뭐 a
태그에 경우는
링크 로 이동하는 게 기본 이벤트 인데 이 녀석을 제거를 할 때는 리턴
펄스를 쓴다고 했었는데요
그냥 이 안에다가 리턴 볼수 있었던 것처럼 이 안에다가 리턴 펄스를
입력을 해주시면 됩니다
뭐 이렇게 저장을 하고
실행을 하게 되면 링크가 뜨게 되는데요 리턴 펄서 를 먹기 때문에 아무리
클릭을 해도 다른 페이지로 이동하지 않게 됩니다 추가적으로 이온 클릭
이라는 인 라인 이벤트 대부 에서 바로 이벤트 라는 녀석을 쓰시게 되면
이 녀석이 바로 이벤트 객체 입니다
이녀석을 활용해 주시면 뭐 스타 프로 팍 에이션 이라든지 등이 모두
가능하기 때문에 이를 활용하면 이벤트 전달도 막을 수 있게 됩니다
예를 들어 이렇게 기본 이벤트 제거와 이벤트 전달을 함께 막아 보고
바디 태그 에도 원클릭 속성을 줘 성
음 디스에
스타일의
백그라운드 칼라를 레드 로 변경해 보도록 하겠습니다
저장을 하공 실행하게 되면
요 바디 를 클릭했을 때는 전체가 붉은 색이 되는 모습을 확인할 수
있는데요
실행을 하고 헬로우 를 클릭을 했을 때는 배경무런 영향도 없는 것을
확인할 수 있습니다
따라서 요 내부에선 곧바로 이벤트를 입력을 하면 이벤트 객체를 활용할 수
있다라고 기억해 주시면 되겠습니다
어쨌거나 간단하게 있나 인 이벤트에 대해서 살펴보았는데요
사실 현대에 들어서는 인 라인 이벤트를 그렇게 자주 사용하지는 않게
됩니다
하지만 사용하는 것이 분명히 있고 그리고 이를 활용할 해서 나중에 앵귤러
날이 액트 가 u 형태를 모방을 해서 무언가를 만들었기 때문에 그러한
것을 쉽게 이해하기 위해서는 인 라인 이벤트에 대한 것도 3추 눈도장을
찍고 있어야 된다고 생각을 합니다
따라서 간단하게 기억을 해 주시면 좋겠고요
오늘 강의는 여기까지 되겠고 다음 강의에서 뵙도록 하겠습니다 감사합니다.