자바스크립트 이벤트 예제

당신은 당신의 학습이 단계에서 다른 이러한 환경에 대해 아무것도 이해할 필요가 없습니다; 우리는 이벤트가 다른 프로그래밍 환경에서 다를 수 있음을 분명히하고 싶었다. 해당 페이지에 나열된 이벤트 처리기는 HTML 코드 내에서 일부 JavaScript를 트리거할 수 있는 많은 기회를 제공합니다. 웹의 경우 이벤트는 브라우저 창 내에서 발생하며, 이벤트는 단일 요소, 요소 집합, 현재 탭에 로드된 HTML 문서 또는 전체 브라우저 창일 수 있습니다. 예를 들어 11장에서 설명한 대로 이벤트 루프의 컨텍스트에서 브라우저 이벤트 처리기는 다른 비동기 알림처럼 행동합니다. 이벤트가 발생할 때 예약되지만 실행 중인 다른 스크립트가 실행될 때까지 기다려야 실행됩니다. 이 섹션에서는 이벤트와 관련된 몇 가지 고급 개념을 간략하게 다룹니다. 이 시점에서 이러한 사항을 완전히 이해하는 것은 중요하지 않지만 때때로 발생할 수 있는 몇 가지 코드 패턴을 설명하는 역할을 할 수 있습니다. 각 브라우저 이벤트 처리기는 컨텍스트에 등록됩니다. 이전 예제에서는 전체 창에 대 한 처리기를 등록 하는 창 개체에 addEventListener 라고 했습니다.

이러한 메서드는 DOM 요소 및 다른 유형의 개체에서도 찾을 수 있습니다. 이벤트 리스너는 이벤트가 등록된 개체의 컨텍스트에서 발생하는 경우에만 호출됩니다. 자바 스크립트는 웹 페이지에 동적 인터페이스를 제공하는 이벤트가 있습니다. 이러한 이벤트는 DOM(문서 개체 모델)의 요소에 연결됩니다. 이러한 이벤트는 기본적으로 버블링 전파 즉, DOM에서 자식에서 상위로 위쪽으로 사용합니다. 인라인 또는 외부 스크립트에서 이벤트를 바인딩할 수 있습니다. 일부 자바 스크립트 이벤트가 있습니다 : 1) onclick 이벤트 : 이것은 마우스 이벤트이며 사용자가 바인딩된 요소를 클릭하면 정의 된 논리를 유발합니다. 코드 #1: 처음에는 구문 분석하기가 어려워지기 때문에 HTML과 자바스크립트를 혼합하는 것이 좋지 않습니다.

별도의 파일에 있는 경우 여러 HTML 문서에 적용할 수 있습니다. 온마우스다운, 온마우스업, 온클릭 이벤트는 모두 마우스 클릭의 일부입니다. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 트리거되고 마우스 버튼이 해제되면 onmouseup 이벤트가 트리거되고 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 트리거됩니다. 각 이벤트에는 이를 식별하는 형식(“키다운”, “포커스” 등)이 있습니다. 대부분의 이벤트는 특정 DOM 요소에서 호출된 다음 해당 요소의 상위 요소에 전파되므로 해당 요소와 연결된 처리기가 이를 처리할 수 있습니다. 브라우저에 따라 일부 이벤트는 전혀 가로챌 수 없습니다. 예를 들어 Chrome에서 현재 탭(컨트롤-W 또는 명령-W)을 닫는 바로 가기 는 JavaScript에서 처리할 수 없습니다. 사용자가 문서가 표시되는 브라우저 탭 또는 창에서 또는 이동할 때 창 개체는 “포커스” 및 “흐림” 이벤트를 수신합니다. 자바 스크립트가 HTML 페이지에 사용되는 경우, 자바 스크립트는 이러한 이벤트에 “반응”할 수 있습니다. 일부 유형의 이벤트는 연속으로 여러 번 빠르게 발생할 수 있습니다(예: “mousemove” 및 “스크롤” 이벤트). 이러한 이벤트를 처리할 때는 시간이 너무 많이 소요되거나 처리기가 너무 많은 시간을 차지하여 문서와의 상호 작용이 느려지기 시작합니다.

Posted in Uncategorised