[JS-중급편-이벤트] 7. 커스텀 이벤트

JavaScript가 모든 시나리오에 대해 기본적으로 제공하는 많은 이벤트에도 불구하고 우리 자신의 특정 요구에 맞게 자체 이벤트를 발생시키고 싶을 때가 있습니다. 우리가 그렇게 하기를 원하는 데에는 여러 가지 이유가 있습니다. 이벤트는 이벤트를 발생시키는 사물과 해당 이벤트를 수신하는 사물 (또는 사물) 사이에 좋은 수준의 분리를 제공합니다. 우리가 살고있는 이벤트 중심 세계에서 DOM 요소는 코드의 내부 작동에 대해 잘 알 필요가 없습니다. 이벤트에 의존함으로써 우리는 UI 나 코드에서 일을 깨뜨리지 않고 나중에 많은 정리를 하지 않고 일을 변경할 수 있는 상당한 유연성을 갖게됩니다. 이것이 내장 이벤트를 매우 유용하게 만드는 것입니다. 이것이 바로 우리가 만들고 실행하는 커스텀 이벤트를 유용하게 만..

• format_list_bulleted 코딩/Javascript
• · 2021. 4. 14.
• textsms

[JS-중급편-이벤트] 6. 키보드 이벤트

자바스크립트 키보드 이벤트 HTML 문서에서 키보드로 작업하려면 숙지해야 할 세 가지 이벤트가 있습니다. 그 세 가지 이벤트는 다음과 같습니다. keydown keypress keyup 위 이벤트의 이름을 얼핏 보면 각 이벤트가 수행하는 역할에 대한 모호한 아이디어가 이미 있을 것입니다. 키보드의 키를 누르면 keydown 이벤트가 시작됩니다. 방금 누른 키를 놓으면 keyup 이벤트가 시작됩니다. 이 두 이벤트는 상호 작용하는 모든 키에서 작동합니다. 그리고, keypress 이벤트는 특별한 이벤트입니다. 언뜻 보기에는 아무 키나 누르면 이 이벤트가 시작될 거 같습니다. keypress 이름에도 불구하고 keypress 이벤트는 문자 (문자, 숫자 등)를 표시하는 키를 누를 때만 발생합니다. 문자 y와..

• format_list_bulleted 코딩/Javascript
• · 2021. 3. 22.
• textsms

[JS-중급편-이벤트] 5. 많은 요소에 대한 이벤트 처리

가장 기본적인 경우 이벤트 리스너는 단일 요소에서 시작된 이벤트를 처리합니다. 이런 말을 처음 들었다면 잠시 시간 내어 JavaScript의 이벤트 튜토리얼을 먼저 읽으십시오. cpro95.tistory.com/154?category=912319 [JS-중급편-이벤트] 1. 자바스크립트 이벤트 눈치채지는 못했겠지만, 대부분의 애플리케이션과 웹사이트는 가만히 있으면 그냥 그 자체로 지루합니다. 애플리케이션과 웹사트가 엄청난 팡파르와 돌풍을 일으키며 시작했지만, 우리가 그 cpro95.tistory.com 더 복잡한 것을 빌드할 때 "하나의 요소에 대해 하나의 이벤트 핸들러" 맵핑이 한계를 나타내기 시작합니다. 가장 일반적인 이유는 JavaScript를 사용하여 동적으로 요소를 만드는 데 있습니다. 생성중인..

• format_list_bulleted 코딩/Javascript
• · 2021. 3. 13.
• textsms

[JS-중급편-이벤트] 4. 코드 실행의 최적시간

자바스크립트를 작성하다 보면 어떻게 하면 코드가 원하는 시간에 딱 맞게 실행되도록 하는 게 중요합니다. 페이지 하단에 코드를 배치하고 나서 페이지가 로드되면 모든 게 끝이 아닙니다. 때로는 페이지가 로드되기 전에 특정 코드가 실행되지 않도록 해야 될 때도 있고, 때로는 페이지 상단에 코드를 넣는 경우도 있습니다. 페이지 로드 중 발생하는 문제 링크를 클릭하거나 또는 브라우저에서 URL을 입력한 후 Enter 키를 누르면 이 때 페이지가 로드됩니다. 보통은 페이지 완료까지 걸리는 시간은 매우 짧습니다. 페이지 로드와 페이지 로드 사이의 짧은 시간 동안 우리가 모르는 컴퓨터 관련 작업이 많이 발생합니다. 여기서 중요하게 봐야할 점은 HTML 페이지에 있는 모든 자바스크립트 코드가 실행된다는 것입니다. 코드가..

• format_list_bulleted 코딩/Javascript
• · 2021. 3. 6.
• textsms

[JS-중급편-이벤트] 1. 자바스크립트 이벤트

눈치채지는 못했겠지만, 대부분의 애플리케이션과 웹사이트는 가만히 있으면 그냥 그 자체로 지루합니다. 애플리케이션과 웹사트가 엄청난 팡파르와 돌풍을 일으키며 시작했지만, 우리가 그 애플리케이션과 상호작용을 하지 않는다면 그 애플리케이션은 가치가 없게 되겠죠. 그 이유는 간단하다. 우리의 애플리케이션(응용 프로그램)은 우리가 하고자 하는 행동에 반응하기 위해 존재합니다. 우리가 침대에서 일어나 하루를 준비하듯 응용 프로그램도 나름 각각의 동기부여가 내재되어 있습니다. 응용 프로그램이 하는 일은 우리가 그 프로그램에게 무엇을 하라고 지시하는 겁니다. 바로 이 점이 오늘의 주제입니다. 우리가 응용 프로그램들에게 무엇을 해야 하는지 지시한다면 반대로 그 프로그램은 어떻게 알아챌까요? 바로 이벤트라는 것에 반응되도..

• format_list_bulleted 코딩/Javascript
• · 2021. 1. 28.
• textsms

[JS-중급편-DOM] 5. DOM 탐색

지금 쯤 깨달았을지 모르지만, 우리의 DOM은 거대한 나무처럼 보입니다. 위험하게 나뭇가지에 매달려 있고 뾰족한 것들을 피하려고 노력하는 거대한 나무입니다. 좀 더 기술적으로 이해하기 위해 DOM의 요소는 브라우저에서 최종적으로 보게 될 내용을 정의하는 계층 구조로 배열됩니다. 이 계층은 HTML 요소를 구성하는 데 사용됩니다. 또한 CSS 스타일 규칙이 어떤 스타일에 어떤 스타일을 적용할지 이해하는데도 사용됩니다. 자바 스크립트 관점에서 이 계층 구조는 약간의 복잡성을 추가합니다. DOM에서 현재 우리가 어디에 있고 어디에 있어야 하는지 알아내기 위해 상당한 시간을 할애해 공부해 보겠습니다. 주변에서 길 찾기 요소를 찾아서 멋진 작업을 수행하기 전에 먼저 요소가 있는 위치에 도달해야합니다. 이 주제를 ..

• format_list_bulleted 코딩/Javascript
• · 2021. 1. 23.
• textsms