JavaScript에서 사용자 정의 이벤트를 만드는 방법

코어 포인트

JavaScript 이벤트 처리는 모든 클라이언트 응용 프로그램의 기초이지만 DOM 요소와 관련이 있으며 충분히 유연하지 않을 수 있습니다. JavaScript 사용자 정의 이벤트는이 문제를 해결하여 더 큰 유연성과 유지 보수의 용이성을 제공합니다.

JavaScript 사용자 정의 이벤트 작성에는 이벤트 이름, 세부 사항 및 옵션 전달이 새로운 메소드를 사용 하여이 이벤트를 특정 요소로 발송 할 수 있습니다.

여러 핸들러가 사용자 정의 이벤트를 구독하여 이벤트에 따라 다양한 작업을 수행 할 수 있습니다. Chrome, Firefox 및 Opera는 맞춤형 이벤트를 지원하며 일부 JavaScript 라이브러리도 지원을 제공합니다.

JavaScript 이벤트 처리는 모든 클라이언트 응용 프로그램의 기초입니다. 대상 요소 (예 : 버튼 클릭, 마우스 이동, 양식 제출 등)에서 이벤트가 발생하면 핸들러 기능이 실행됩니다. 이벤트 객체는 핸들러로 전달되며, 이는 기본 작업을 차단하기위한 다양한 속성과 많은 방법을 제공합니다. 한 가지 단점은 이벤트가 DOM 요소와 밀접한 관련이 있다는 것입니다. 사용자 댓글을 받아들이는 간단한 형식을 고려하십시오 CustomEvent 양식을 제출할 때 핸들러를 작성하여 메시지를 화면에 반영 할 수 있습니다. dispatchEvent 메시지를 트윗으로 보내거나 서버에 저장하거나 다른 작업을 수행하려면 어떻게해야합니까? 기존 이벤트 위임 방법에는 두 가지 옵션이 있습니다.

기존 핸들러에 더 많은 코드를 추가하십시오. 기능이 추가, 변경 또는 삭제 될 때마다 핸들러 기능을 업데이트하고 테스트해야하므로 충분히 유연하지 않습니다. 게시 된 메시지는 수십 개의 용도로 사용될 수 있으며 동일한 코드 블록에 모두 적용하려고합니다.

각 목적에 대해 더 많은 이벤트 핸들러를 만듭니다. 이것은 더 우아한 코드를 생성하지만 유지 보수 문제를 일으킬 것입니다. 먼저 각 기능은 메시지를 추출하고 확인하기 위해 유사한 작업을 수행해야합니다. 양식을 변경해야한다면 어떻게해야합니까? ID를 바꾸면 각 가입자의 이벤트 처리 코드를 변경해야합니다.

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

유효한 메시지를 게시 할 때 사용자 정의 "NewMessage"이벤트를 트리거 할 수 있다면 좋지 않습니까? 특정 양식 노드를 참조하는 대신

또는 태그를 모니터링 할 수 있다면 더 나을 것입니다. 맞춤형 이벤트를 통해이를 수행 할 수 있습니다. 사용자 정의 이벤트를 트리거하는 것은 간단합니다.

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

이 예에서 "NewMessage"는 사용자 정의 이벤트 유형입니다. 두 번째 매개 변수는 세 가지 속성을 가진 객체입니다.

• : 이벤트에 대한 사용자 지정 정보를 제공하는 자식 객체. 이 예에서는 메시지와 시간을 추가했습니다. detail
: 이면 이벤트는 이벤트를 유발 한 요소의 조상에게 거품이됩니다. bubbles true : 인 경우 이벤트 객체의
• 메소드를 사용하여 이벤트를 취소 할 수 있습니다. cancelable true 이제, 우리는이 이벤트가 특정 요소로 파견해야합니다. stopPropagation() 다음 코드를 사용 하여이 이벤트를 구독 할 수있는 핸들러가 다수의 핸들러는 다음과 같습니다.
데모 페이지

이 예제는 기술을 보여줍니다 : 사용자 정의 이벤트 데모 페이지보기. 표준 이벤트 핸들러는 위의 HTML 양식의 제출물을 찾습니다. 이 기능은 현재 메시지를 가져오고 유효하다고 가정하면 새로운 "NewMessage"이벤트가 발송됩니다.

핸들러는 이제 "NewMessage"이벤트를 구독 할 수 있습니다. 이벤트는 유효한 메시지가 존재하는 경우에만 트리거되며

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

>로 설정되었으므로 이벤트는 root

와 같은 양식 또는 조상에 적용될 수 있습니다. >

메시지 자체는 이벤트 객체의

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

속성에서 추출 될 수 있습니다.

브라우저 호환성

작성시, 크롬, 파이어 폭스 및 오페라 지원

객체. 야간 버전의 Safari에서 사용할 수 있으므로 곧 해당 브라우저에서 사용할 수 있습니다. 이 객체는 IE9 이하에서 지원되지 않습니다. 다행히도 여러 JavaScript 라이브러리는 Custom Event Delegates를 지원하므로 SitePoint를 계속 지켜봐 주시면 곧 브라우저 크로스 솔루션을 얻으십시오.

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

(FAQS 부분은 의사 원리 목표와 일치하지 않고 너무 길기 때문에 여기서 생략됩니다.)

위 내용은 JavaScript에서 사용자 정의 이벤트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!