집 > 기사 > 웹 프론트엔드 > JavaScript 커스텀 이벤트에 대한 상세한 분석

JavaScript 커스텀 이벤트에 대한 상세한 분석

小云云원래의: 2018-02-01 10:27:161264검색

이 기사에서는 주로 JavaScript 사용자 정의 이벤트에 대한 자세한 분석을 공유합니다. 이벤트는 사용자가 브라우저와 상호 작용하는 방법입니다. 이 경우 코드 로직은 일반적으로 사용자가 입력한 정보를 수집하고 정보의 적법성을 확인하는 것입니다. AJAX를 사용하여 서버 상호작용과 통신하고, 필요한 친구들이 참고할 수 있으니 모두에게 도움이 되었으면 좋겠습니다.

이벤트

　일반적으로 기술 수준이 제한되어 있으니 틀린 부분이 있으면 정정해주세요.

　이벤트는 사용자가 브라우저와 상호작용하는 방법입니다. 예를 들어, 사용자가 기능을 등록한 경우 기본 정보를 입력한 후 제출 버튼을 클릭하면 등록 기능을 구현할 수 있습니다. 이 기능을 완료하는 데 필요한 것은 클릭 이벤트뿐입니다. 우리는 작업 동작을 미리 정의하고 사용자가 제출 버튼을 클릭하면 미리 결정된 동작을 실행합니다. 이 경우 코드 로직은 일반적으로 사용자가 입력한 정보를 수집하고 정보의 적법성을 확인하는 것입니다. AJAX를 사용하여 서버와 상호 작용합니다.

　이 프로세스는 일반적으로 함수를 캡슐화한 다음 함수를 호출하는 것과 같습니다. 이벤트는 실제로 사용자의 일부 작업에 의해 이벤트 함수 호출이 통보된다는 점을 제외하면 함수 정의 및 함수 호출 프로세스와 유사합니다. 브라우저가 함수를 호출할 수 있도록 허용합니다.

우선 브라우저는 클릭, 키다운 등을 포함한 이벤트 목록을 제공했습니다. 이벤트를 맞춤설정해야 하는 이유는 무엇인가요? 사실 그것은 우리의 행동에 대한 더 정확한 설명입니다. 위의 사용자 등록을 예로 들면, saveMessage라는 이벤트를 정의할 수 있는데, 이 이벤트는 제출 버튼을 클릭할 때 발생합니다. 더 직관적인 것 같지만, 함수를 주의 깊게 생각해 보세요. 호출과 이벤트 트리거링의 차이점은 우리가 실행한 함수는 함수 호출이고, 우리가 실행하지 않은 함수는 이벤트 트리거라는 점입니다. 아래 코드를 보세요:

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.onclick = handler;
 function handler(){
  console.log("aaa");
 }
}

버튼을 클릭하면 aaa 가 출력되는데, 이 함수는 우리가 호출하는 것이 아니라 브라우저에서 직접 handler() 함수를 호출하면 실행되는 것이 분명합니다. aaa를 인쇄할 수도 있지만 이는 우리가 호출하는 것이므로 함수 호출입니다.

커스텀 이벤트의 역할

　커스텀 이벤트는 브라우저의 이벤트 메커니즘에 따라 맞춤화하는 기능입니다. 사용자 정의 이벤트는 처리 기능에 대한 더 나은 설명을 제공할 수 있으며 플러그인에 더 나은 처리 프로세스를 가져올 수도 있습니다. 또 다른 요구 사항이 있다고 가정해 보겠습니다. 서버에서 데이터 세트를 가져와 HTML의 목록으로 표시한 다음 기존 처리 기능을 사용하는 경우 다음과 같이 작성할 수 있습니다.

dataTable("url");
$("table").find("input[type=&#39;checkbox&#39;]:first").prop("checked",true);

JS는 단일 스레드이고 AJAX는 비동기식이므로 우리의 목적을 달성할 수 없습니다. $("table").find("input[type='checkbox']:first").prop When ("checked ",true)가 실행되면 필요한 데이터를 아직 얻지 못했습니다. 플러그인의 내부 구현을 수정하는 것은 분명히 현명하지 않습니다. 허용되는 플러그인에는 적절한 콜백 함수(또는 사용자 정의 이벤트)가 있어야 합니다. 이제 목록을 성공적으로 그리는 콜백 함수가 있습니다. 콜백 함수는 이벤트로 간주됩니다. 이 이벤트에 이벤트 작업을 추가하고 처리 함수를 정의한 다음 목록이 성공적으로 그려지면 플러그인이 이 처리 함수를 실행하도록 할 수 있습니다.

맞춤 이벤트 구현

브라우저의 기본 이벤트를 시뮬레이션하여 맞춤 이벤트를 구현합니다(en: 맞춤 이벤트 이름, fn: 이벤트 처리 기능, addEvent: DOM 요소에 맞춤 이벤트 추가, TriggerEvent: 맞춤 이벤트 트리거 정의 event):

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.addEvent("test",function(){console.log("handler1")});
 demo.addEvent("test",function(){console.log("handler2")});
 demo.onclick = function(){
  this.triggerEvent("test");
 }
}
Element.prototype.addEvent = function(en,fn){
 this.pools = this.pools || {};
 if(en in this.pools){
  this.pools[en].push(fn);
 }else{
  this.pools[en] = [];
  this.pools[en].push(fn);
 }
}
Element.prototype.triggerEvent = function(en){
 if(en in this.pools){
  var fns = this.pools[en];
  for(var i=0,il=fns.length;i<il;i++){
   fns[i]();
  }
 }else{
  return;
 }
}

스스로 실행한 함수는 함수 호출이고, 우리가 실행하지 않은 함수는 트리거 이벤트라고 할 수 있는데, 호출자는 어떤 함수를 호출할지 어떻게 알 수 있나요? 호출이 문제이므로 추가 이벤트 함수와 트리거 이벤트 함수 사이에 몇 가지 제약 조건을 추가해야 합니다. 즉, 둘 사이에 액세스할 수 있는 이벤트 풀이 있어야 합니다. 이벤트를 추가할 때 이벤트와 해당 함수를 넣어야 합니다. 풀에서 트리거 조건이 충족되면 풀로 이동하여 트리거할 이벤트를 찾고 해당 처리 기능을 실행하므로 위의 코드 조각이 있습니다.

　동일한 함수(이벤트)에 대해 여러 처리 함수가 있을 수 있으므로 이러한 처리 함수를 저장하기 위한 컬렉션이 필요합니다. 이때 JSON 또는 배열 두 가지 솔루션을 반영해야 합니다. JSON의 구조는 키:값입니다. 처리 함수의 경우 이름이 영향을 미치지 않으므로 처리 함수를 저장하기 위해 배열을 사용합니다. 이 함수 집합이 처리하는 기능이 있으므로 이 처리 함수 집합에 대한 설명도 필요합니다. 필요함-->

　간단한 BootStrap 모달 창을 사용하여 사용자 정의 이벤트의 역할 시연:

window.onload = function(){
 var show = document.getElementById("show");
 var hide = document.getElementById("hide");
 var content = document.getElementById("content");
 show.onclick = function(){
  content.modal("show");
 }
 hide.onclick = function(){
  content.modal("hide");
 }
 content.addEvent("show",function(){alert("show before")});
 content.addEvent("shown",function(){
  document.getElementById("input").focus();
  alert("show after");
 }); 
}
;(function(ep){
 ep.addEvent = function(en,fn){
  this.pools = this.pools || {};
  if(en in this.pools){
   this.pools[en].push(fn);
  }else{
   this.pools[en] = [];
   this.pools[en].push(fn);
  }
 }
 ep.triggerEvent = function(en){
  if(en in this.pools){
   var fns = this.pools[en];
   for(var i=0,il=fns.length;i<il;i++){
    fns[i]();
   }
  }else{
   return;
  }
 }
 ep.modal = function(t){
  switch(t){
   case "show":
    this.triggerEvent("show");
    this.style.display = "block";
    setTimeout(function(){this.triggerEvent("shown")}.bind(this),0);//该定时器主要是为了在视觉上先看见content,在弹出消息
    break;
   case "hide":
    this.style.display = "none";
    break;
   default:
    break;
  }
 }

}(Element.prototype));

팝업 창이 나타나기 전후에 처리 기능을 미리 정의하고 팝업 창이 트리거될 때 실행할 수 있습니다. 해당 이벤트 해당 처리 기능.

JavaScript 커스텀 이벤트에 대한 상세한 분석

관련 기사