JavaScript로 맞춤 이벤트를 만드는 방법

javaScript 이벤트 처리는 모든 클라이언트 애플리케이션의 기초입니다. 대상 요소에서 버튼 클릭, 마우스 이동, 폼 제출 등의 이벤트가 발생하면 핸들러 기능이 실행됩니다. 핸들러에 전달된 이벤트 객체는 위반을 방지하기 위한 다양한 속성과 다양한 메서드를 제공합니다.
한 가지 단점은 이벤트가 필연적으로 DOM 요소와 연결된다는 것입니다. 사용자로부터 정보를 받는 간단한 양식을 생각해 보세요.

your message< /label>

SEND
양식을 제출할 때 화면에 메시지를 에코합니다.
document.getElementById("msgbox").addEventListener("submit", function(e) {
e.preventDefault();
var msg = e.currentTarget.getElementById("msg").value .trim();
if (msg) {
Alert(msg);
}
},
메시지를 트윗으로도 보내려면 다음과 같습니다. 서버에 저장됩니까, 아니면 다른 작업을 수행합니까? 기존 이벤트 대리자 메서드에는 두 가지 옵션이 있습니다.

1. 기존 추가 핸들러에 코드를 추가합니다.
기능을 추가, 변경, 제거할 때마다 핸들러 기능을 엄격하게 하고 테스트했기 때문에 업데이트해야 하는 부분입니다. 게시된 메시지에는 수십 가지 용도가 있을 수 있으며 이를 모두 동일한 코드 블록에 적용하려고 합니다.
각 용도에 대해 2개의 추가 이벤트 핸들러가 생성됩니다.
이렇게 하면 코드가 더욱 세련되어 유지 관리 문제가 발생하게 됩니다. 첫째, 각 함수는 메시지를 추출하고 유효성을 검사하기 위해 유사한 작업을 수행해야 합니다. 양식을 변경해야 하는 경우 간단히 ID 이름을 바꾸면 각 구독자의 이벤트 처리 코드를 변경해야 합니다.
유효한 메시지가 게시될 때마다 간단히 사용자 정의 "newMessage" 이벤트를 발생시킬 수 있다면 좋지 않을까요? 특정 양식 노드를 참조하는 대신 문서나 본문 태그를 간단히 모니터링할 수 있다면 더 좋지 않을까요? . 이것이 바로 맞춤 이벤트를 통해 우리가 할 수 있는 일입니다.
사용자 정의 이벤트를 발생시키는 것은 간단합니다. 이름과 세부 정보를 전달하고 새 CustomEvent 개체를 선택합니다.
var event = new CustomEvent(
"newMessage",
{
세부 정보: {
메시지: "Hello World!",
시간: new Date(),
},
버블: true,
취소 가능: true
}
); 이 예에서 "newMessage"는 사용자 정의 이벤트 유형입니다. 두 번째 매개변수는 세 가지 속성을 갖는 객체입니다.
세부정보: 맞춤형 이벤트 정보를 제공하는 하위 객체입니다. 이 예에서는 메시지와 시간을 추가했습니다.
버블: 이것이 true인 경우 이벤트를 트리거한 상위 요소에서 이벤트가 버블링됩니다.
취소 가능: true인 경우 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트를 취소할 수 있습니다.
이제 예를 들어 특정 요소에 이 이벤트를 전달해야 합니다.
document.getElementById("msgbox").dispatchEvent(event);
다음과 같은 코드를 사용하여 원하는 수의 핸들러가 이 이벤트를 구독할 수 있습니다.
document.addEventListener("newMessage", newMessageHandler, false);

표준 이벤트 핸들러는 제출된 HTML 양식 위에서 찾습니다. 이 함수는 현재 메시지가 유효하다고 가정하여 이를 가져오고 새 "newMessage" 이벤트를 전달합니다.
var msgbox = document.getElementById("msgbox");
msgbox.addEventListener("submit", SendMessage, false)
// 새 메시지: newMessage 이벤트 발생
function SendMessage(e) {
e.preventDefault();
var msg = document.getElementById("msg").value.trim()
if (msg && window.CustomEvent) {
var event = new CustomEvent("newMessage", {
                                                       거품: true,
~ | 이 이벤트는 유효한 메시지가 있는 경우에만 발생하며, bubble이 true로 설정되어 있으므로 이벤트는 예를 들어 루트 문서와 같은 양식이나 해당 조상에 적용될 수 있습니다.
//newMessage 이벤트 수신
document.addEventListener("newMessage", newMessageHandler, false)
// newMessage 이벤트 핸들러
function newMessageHandler(e) {
LogEvent(
"+e.currentTarget.nodeName+"의 이벤트 구독자, "
                                                                                                                                       세부정보는 자체적으로 추출할 수 있습니다. 메시지 속성에 대한 이벤트 개체입니다.

브라우저 호환성

이 글을 작성하는 시점에서는 CustomEvent를 지원하는 Chrome, Firefox, Opera가 대상입니다. Safari의 야간 버전에서 사용할 수 있으므로 브라우저에 곧 도착할 것입니다.

IE9 이하는 객체를 지원하지 않습니다. 다행히도 일부 JavaScript 라이브러리는 사용자 정의 이벤트 위임을 지원하므로 곧 크로스 브라우저 솔루션을 위해 SitePoint를 계속 살펴보세요.