js 사용자 정의 이벤트 및 이벤트 상호 작용 원칙 개요 (1)

집

웹 프론트엔드

JS 튜토리얼

js 사용자 정의 이벤트 및 이벤트 상호 작용 원칙 개요 (1)_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:42 PM

이벤트 상호 작용 맞춤 이벤트

JS에서 이벤트는 JS가 브라우저와 상호 작용하는 주요 방법입니다. 이벤트는 느슨하게 결합된 코드를 생성하는 기술인 Observer라는 디자인 패턴입니다. 객체는 객체의 수명 주기에서 흥미로운 순간이 도래했음을 나타내는 이벤트를 게시할 수 있습니다. 그런 다음 다른 개체는 개체를 관찰하고 흥미로운 순간이 올 때까지 기다렸다가 코드를 실행하여 응답할 수 있습니다.

관찰자 패턴은 주체와 관찰자라는 두 가지 유형의 객체로 구성됩니다. 주체는 이벤트 게시를 담당하고, 관찰자는 이러한 이벤트를 구독하여 주체를 관찰합니다. 이 패턴의 핵심 개념은 에이전트가 관찰자에 대해 아무것도 모른다는 것입니다. 즉, 관찰자가 없어도 자체적으로 존재할 수 있고 정상적으로 작동할 수 있다는 의미입니다. 반면 관찰자는 주제에 대해 알고 있으며 이벤트에 대한 콜백 함수(이벤트 핸들러)를 등록할 수 있습니다. DOM의 경우 DOM 요소가 주제이고 이벤트 처리 코드가 관찰자입니다.

이벤트는 DOM과 상호작용하는 가장 일반적인 방법이지만 맞춤 이벤트를 구현하여 DOM이 아닌 코드에서도 사용할 수 있습니다. 사용자 정의 이벤트의 기본 개념은 이벤트를 관리하는 객체를 생성하고 다른 객체가 해당 이벤트를 수신할 수 있도록 하는 것입니다. 간단히 말해서, 프로그램이 실행될 때 여러 경로가 있을 수 있기를 바라며, 프로그램이 특정 장소로 실행되면 즉시 사용자 등록 메소드에 있는 코드를 실행한 후 실행이 끝난 후 계속 실행되기를 바랍니다. 이 프로세스를 모니터링이라고 합니다.

예를 들어 MyEvent.js 파일을 만들고 그 안에 클래스를 만듭니다.

코드 복사 코드는 다음과 같습니다:

 
function MyEvent(){ 
this.handler; 
} 
MyEvent.prototype={ 
addHandler:function(handler) 
{ 
this .handler=handler; 
}, 
fire:function() 
{ 
this.handler() 
}, 
removeHandler:function() 
{ 
this.handler=null; 
} 
} 

위는 js 프로토타입 아이디어를 활용하여 만든 클래스입니다. 잘 모르시는 분들은 관련 정보를 확인하시면 됩니다. MyEvent 유형에는 이벤트 핸들러(즉, 사용자가 등록한 메소드)를 저장하는 데 사용되는 별도의 속성 핸들러가 있습니다. 또한 세 가지 메서드가 있습니다. 이벤트 핸들러를 등록하는 데 사용되는 addHandler(), 이벤트를 트리거하는 데 사용되는 fire() 및 이벤트 핸들러 등록을 취소하는 데 사용되는 RemoveHandler().

그러면 이렇게 활용하고, 새로운 html 파일을 만들어 쉽게 참고할 수 있도록 MyEvent.js와 같은 디렉터리에 넣어두면 됩니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<헤드>
<제목>

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7319

자바 튜토리얼

1625

Cakephp 튜토리얼

1349

라라벨 튜토리얼

1261

PHP 튜토리얼

1209

Related knowledge

이벤트 ID 4660: 개체가 삭제되었습니다. [수정] Jul 03, 2023 am 08:13 AM

독자 중 일부는 이벤트 ID4660을 경험했습니다. 그들은 무엇을 해야 할지 확신하지 못하는 경우가 많으므로 이 가이드에서 이에 대해 설명합니다. 이벤트 ID 4660은 일반적으로 개체가 삭제될 때 기록되므로 컴퓨터에서 이 문제를 해결할 수 있는 몇 가지 실용적인 방법도 살펴보겠습니다. 이벤트 ID4660이란 무엇입니까? 이벤트 ID 4660은 Active Directory의 개체와 관련되어 있으며 다음 요소에 의해 트리거됩니다. 개체 삭제 – Active Directory에서 개체가 삭제될 때마다 이벤트 ID 4660이 포함된 보안 이벤트가 기록됩니다. 수동 변경 - 사용자 또는 관리자가 개체의 사용 권한을 수동으로 변경할 때 이벤트 ID 4660이 생성될 수 있습니다. 이는 권한 설정을 변경하거나, 액세스 수준을 수정하거나, 사람이나 그룹을 추가 또는 제거할 때 발생할 수 있습니다.

win11에서 분할 화면 상호 작용 켜기 Dec 25, 2023 pm 03:05 PM

win11 시스템에서는 분할 화면 상호 작용을 켜서 여러 모니터가 동일한 시스템을 사용하고 함께 작동할 수 있습니다. 그러나 많은 친구들은 실제로 분할 화면 상호 작용을 켜는 방법을 모릅니다. 다음은 일어나서 공부하는 것입니다. win11에서 분할 화면 상호 작용을 여는 방법 1. 시작 메뉴를 클릭하고 "설정"을 찾습니다. 2. 그런 다음 거기에서 "시스템" 설정을 찾습니다. 3. 시스템 설정에 들어간 후 왼쪽의 "디스플레이"를 선택하세요. 4. 그런 다음 오른쪽의 다중 디스플레이에서 "이 디스플레이 확장"을 선택하세요.

iPhone 잠금 화면에서 예정된 캘린더 이벤트 받기 Dec 01, 2023 pm 02:21 PM

iOS 16 이상을 실행하는 iPhone에서는 예정된 캘린더 이벤트를 잠금 화면에 직접 표시할 수 있습니다. 이 작업이 어떻게 수행되었는지 알아보려면 계속 읽어보세요. 시계 페이스 컴플리케이션 덕분에 많은 Apple Watch 사용자는 손목을 통해 다음 캘린더 이벤트를 확인하는 데 익숙합니다. iOS16 및 잠금 화면 위젯의 등장으로 기기 잠금을 해제하지 않고도 iPhone에서 직접 동일한 캘린더 이벤트 정보를 볼 수 있습니다. 캘린더 잠금 화면 위젯은 두 가지 형태로 제공되며, 다음 예정된 이벤트 시간을 추적하거나 이벤트 이름과 시간을 표시하는 더 큰 위젯을 사용할 수 있습니다. 위젯 추가를 시작하려면 Face ID 또는 Touch ID를 사용하여 iPhone을 잠금 해제하고 길게 누르세요.

VUE3 기본 튜토리얼: Vue.js를 사용한 사용자 정의 이벤트 Jun 15, 2023 pm 09:43 PM

Vue.js는 많은 편리한 기능을 제공하는 인기 있는 JavaScript 프레임워크이므로 웹 애플리케이션을 개발할 때 매우 유용합니다. Vue.js의 사용자 정의 이벤트 시스템은 이를 더욱 유연하게 만들고 구성 요소 이벤트 발생 및 처리를 통해 더 나은 코드 재사용성을 허용합니다. 이 기사에서는 Vue.js에서 사용자 정의 이벤트를 사용하는 방법에 대해 설명합니다. Vue.js의 사용자 정의 이벤트의 기초 Vue.js에서는 v-on 지시문을 통해 DOM 이벤트를 수신할 수 있습니다. 예를 들어,

JavaScript에서 'oninput' 이벤트의 목적은 무엇입니까? Aug 26, 2023 pm 03:17 PM

입력 상자에 값이 추가되면 oninput 이벤트가 발생합니다. JavaScript에서 oninput 이벤트를 구현하는 방법을 이해하려면 다음 코드를 실행해 보세요. - 예<!DOCTYPEhtml><html> <body> <p>아래 쓰기:</p> <inputtype="text&quot

Vue3+TS+Vite 개발 기술: 백엔드 API와 상호작용하는 방법 Sep 08, 2023 pm 06:01 PM

Vue3+TS+Vite 개발 기술: 백엔드 API와 상호작용하는 방법 소개: 웹 애플리케이션 개발에서 프론트엔드와 백엔드 간의 데이터 상호작용은 매우 중요한 링크입니다. 널리 사용되는 프런트엔드 프레임워크인 Vue3에는 백엔드 API와 상호작용할 수 있는 다양한 방법이 있습니다. 이 기사에서는 Vue3+TypeScript+Vite 개발 환경을 사용하여 백엔드 API와 상호 작용하는 방법을 소개하고 코드 예제를 통해 이해를 심화시킵니다. 1. Axios를 사용하여 요청을 보냅니다.

PHP 프로젝트에서 달력 기능과 이벤트 알림을 구현하는 방법은 무엇입니까? Nov 02, 2023 pm 12:48 PM

PHP 프로젝트에서 달력 기능과 이벤트 알림을 구현하는 방법은 무엇입니까? 캘린더 기능과 이벤트 알림은 웹 애플리케이션을 개발할 때 일반적인 요구 사항 중 하나입니다. 개인 일정 관리, 팀 협업, 온라인 이벤트 예약 등 캘린더 기능을 통해 편리한 시간 관리와 거래 조율이 가능합니다. PHP 프로젝트에서 달력 기능 및 이벤트 알림 구현은 다음 단계를 통해 완료할 수 있습니다. 데이터베이스 디자인 먼저 달력 이벤트에 대한 정보를 저장할 데이터베이스 테이블을 디자인해야 합니다. 단순한 디자인에는 다음 필드가 포함될 수 있습니다. ID: 이벤트에 고유한 필드

uniapp 구현은 어떻게 JSBridge를 사용하여 네이티브와 상호 작용합니까? Oct 20, 2023 am 08:44 AM

uniapp이 네이티브와 상호 작용하기 위해 JSBridge를 사용하여 구현하는 방법에는 특정 코드 예제가 필요합니다. 1. 배경 소개 모바일 애플리케이션 개발에서는 일부 네이티브 기능을 호출하거나 일부 네이티브 데이터를 얻는 등 네이티브 환경과 상호 작용해야 하는 경우가 있습니다. 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크인 uniapp은 JSBridge를 사용하여 통신함으로써 기본 장치와 상호 작용할 수 있는 편리한 방법을 제공합니다. JSBridge는 프런트 엔드가 모바일 네이티브 엔드와 상호 작용하기 위한 기술 솔루션입니다.

See all articles