JavaScript 맞춤 이벤트 소개_javascript 기술

많은 DOM 개체에는 div의 경우 클릭, 마우스오버 및 기타 이벤트가 지원됩니다. 이벤트 메커니즘은 클래스 설계에 큰 유연성을 제공할 수 있습니다. 웹 기술이 발전함에 따라 JavaScript를 사용하여 객체를 맞춤화하는 경우가 점점 더 많아지고 있습니다. 생성한 객체에 이벤트 메커니즘을 허용하고 이벤트를 통해 다른 사람과 통신하면 개발 효율성이 크게 향상될 수 있습니다.

간단한 이벤트 요건

이벤트는 선택사항이 아니며 특정한 필요에 따라 필수입니다. 매우 간단한 요구 사항을 예로 들어 보겠습니다. 대화 상자는 웹 개발에서 매우 일반적입니다. 각 대화 상자에는 닫기 버튼이 있습니다. 코드는 다음과 같습니다.

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

   
       
       
   
   

   

   
       
        Dialog

       

       

   

   
        함수 대화상자(id){
           this.id=id;
           var that=this;
            document.getElementById(id).children[0].onclick=function(){
                that.close();
           }
        }

        Dialog.prototype.show=function(){
           var dlg=document.getElementById(this.id);
            dlg.style.display='block';
            dlg=null;
        }

        Dialog.prototype.close=function(){
           var dlg=document.getElementById(this.id);
            dlg.style.display='none';
            dlg=null;
        }
  

   
        function openDialog(){
           var dlg=new Dialog('dlgTest');
            dlg.show();
        }