자바스크립트의 맞춤 이벤트-JS 튜토리얼-php.cn

자바스크립트의 맞춤 이벤트

高洛峰

풀어 주다： 2016-11-16 11:22:35

원래의

1576명이 탐색했습니다.

사용자 정의 이벤트: 사용자는 실제로 문자열인 이벤트 유형을 지정한 다음 이 유형의 이벤트에 대한 이벤트 처리 함수를 지정할 수 있습니다. 호출 시 배열로 관리됩니다. 여러 이벤트 처리 함수를 찾아 호출하세요.

function EventTarget(){
            this.handlers={};
        }
 
        EventTarget.prototype={
            constructor:EventTarget,
            addHandler:function(type,handler){
                if(typeof this.handlers[type]==&#39;undefined&#39;){
                    this.handlers[type]=new Array();
                }
                this.handlers[type].push(handler);
            },
            removeHandler:function(type,handler){
                if(this.handlers[type] instanceof Array){
                    var handlers=this.handlers[type];
                    for(var i=0,len=handlers.length;i<len;i++){
                        if(handler[i]==handler){
                            handlers.splice(i,1);
                            break;
                        }
                    }
                }
            },
            trigger:function(event){
                if(!event.target){
                    event.target=this;
                }
                if(this.handlers[event.type] instanceof Array){
                    var handlers=this.handlers[event.type];
                    for(var i=0,len=handlers.length;i<len;i++){
                        handlers[i](event);
                    }
                }
            }
        }

로그인 후 복사

이벤트 핸들러를 추가하려면 addHandler 메소드를 사용하고, 이벤트 핸들러를 제거하려면 RemoveHandler 메소드를 사용합니다. 모든 이벤트 핸들러는 속성 핸들러에 균일하게 저장되고 관리됩니다. 이벤트를 트리거하기 위해 트리거 메소드를 호출합니다. 이 메소드는 최소한 유형 속성을 매개변수로 포함하는 객체를 수신합니다. 트리거되면 핸들러 속성의 유형에 해당하는 이벤트 핸들러를 검색합니다. 테스트할 코드를 작성해 보세요.

function onClose(event){
            alert(&#39;message:&#39;+event.message);
        }
 
        var target=new EventTarget();
        target.addHandler(&#39;close&#39;,onClose);
 
        //浏览器不能帮我们创建事件对象了，自己创建一个，自定义事件对象的属性
        var event={
            type:&#39;close&#39;,
            message:&#39;Page Cover closed!&#39;
        };
 
        target.trigger(event);

로그인 후 복사