Javascript는 DOM 요소 이벤트 구현 code_javascript 기술을 처리합니다.

DOM 요소에는 몇 가지 표준 이벤트가 있습니다. 일반적으로 onclick=함수만 사용해야 합니다. 그러나 DOM 요소에 여러 이벤트를 추가하거나 이벤트를 삭제하거나 Javascript를 사용하여 컨트롤을 캡슐화해야 하는 경우 이벤트를 사용자 정의할 때 onclick=함수를 추가합니다. 메소드로는 충분하지 않지만 브라우저에는 호출할 addEventListener 및 attachmentEvent 메소드가 있으므로 C#의 이벤트 위임과 유사한 이벤트 트리거 메커니즘을 시뮬레이션합니다!

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

/*
* 기능: 이벤트 처리
* 작성자: LQB
* 시간: 2009-1-4
* #include JCore.js
*/
var JEvents = function(){
this.events={};
this.addEvent = function(o){//이벤트 추가
if(typeof o == 'string'){/* strArg1, strArg2...*/
for(var i = 0, a = 인수, v; v = a[i]; i ){
v = v.toString() 형식으로 매개변수를 전달합니다. .toLowerCase( );
var enFX = v.indexOf("on")==0 ? v.substr(2) :
if(!this.events[enFX]){
this .events[ enFX] = true;
}
}
}else{
JCore.apply(this.events, o,false)
}
}; this.addListener = function(eventName,fn,scope/*,Args……*/){//이벤트 처리 방법 추가
if(typeof(eventName)!="string"|| eventName.lenght= =0)return;
if(typeof(fn)!="function")return;
eventName = eventName.toString().toLowerCase()
var enFX = eventName.indexOf("on" )==0 ? eventName.substr(2) : eventName;
if(!this.events[enFX]){
throw "Error! Event /"" eName "/"이 존재하지 않습니다." }
var sp =scope||window;
var callArgs = Array.prototype.slice.call(arguments, 3);//4번째 매개변수부터 시작
callArgs = typeof(callArgs)!=" undefound"?callArgs :[];
var 대리자 = fn.createDelegate(callArgs,sp);//JCore는
을 지원합니다//fn 메서드에 대한 표시를 만들고
if(!fn.uid를 사용합니다. ) { 이벤트 삭제 시
var time = new Date();
fn.uid= "" time.getMinutes() time.getSeconds() time.getMilliseconds()
}
/ /대리자 표시, 삭제 이벤트를 바인딩할 때
delegate.uid = getCacheAttName(enFX,fn.uid)
if(typeof(this.events[enFX])!="object")
this를 사용하세요. .events[enFX] =[];
this.events[enFX].push(delegate);//이벤트 목록에 메서드 추가
}
this.removeListener = function(eventName,fn ){//이벤트 바인딩 제외
if(eventName && fn){
eventName = eventName.toString().toLowerCase()
var enFX = eventName.indexOf("on")==0 ?eventName.substr (2):eventName;
var AttName = getCacheAttName(enFX,fn.uid)
if(typeof(this.events[enFX])=="object"){//이 이벤트 존재합니다
var function = this.events[enFX];
for(i=0;iif(functions[i].uid ===AttName ){//찾기, 삭제
this.events[enFX].remove(functions[i])
break
}
}
}
}
}
this.fireEvent = function(eName,eventArg){//이벤트 트리거
eName = eName.toString().toLowerCase()
var enFX = eName.indexOf("on" )==0 ? eName.substr(2) : eName;
var Arg = new Array()
if(typeof(eventArg)!="정의되지 않음"){
if(typeof(eventArg) =="array ") Arg=eventArg;
else Arg.push(eventArg)
}
if(typeof(this.events[enFX])=="object"){//이 이벤트 존재하며 동시에 추가됨 이벤트 처리 방법
var function = this.events[enFX]
for(i=0;ifunctions[i].apply (창,Arg)
}
}
}
/*------------------- ------- ------------프라이빗 메소드---------------- ------- --*/
var getCacheAttName = function(eventName,fnuid){
return "handle-" eventName "-" fnuid;
}
}
/ *------ ----------------- -------------다음은 DOM 요소 이벤트를 처리하는 데 사용되는 Static 메서드입니다------------ ---------- -*/
var JEventsExtendMethod = {
cache : {//각 이벤트를 표시하는 데 사용되는 시간 처리 캐시 이벤트 삭제 시 사용되는 처리 방법
eventCache : {},
setCache : function( el,Name,value){
if(typeof(this.eventCache[el])!="object"){
this.eventCache[el]={length :1};
}
this.eventCache[el][Name]=value;
this.eventCache[el].length
},
getCache : function(el,Name){
if(typeof(this .eventCache[el]) == "object")
return this.eventCache[el][Name]; >else
return null;
},
removeCache : function(el, Name){
if(typeof(this.eventCache[el]) == "object"){
delete this.eventCache[el][Name];//속성 삭제
this.eventCache[el ].length--
}
if(this.eventCache[el] && this.eventCache[el] .length ==1)//Clear
delete this.eventCache[el];
}
},
getCacheAttName : function(eventName,fnuid){
return "handle-" eventName "-" fnuid;
},
bind: function(el,eventName,fn ,scope/*,Args…*/){//요소에 대한 이벤트 처리 방법 추가
if(typeof(el)=="undefine"||el==null)return
if(typeof(eventName)!="string"| | eventName.lenght==0)return;
if(typeof(fn)!="function")return
var indexOfon = eventName.toString().toLowerCase().indexOf("on");
var enIE = indexOfon==0?eventName:"on" eventName;
var enFX = indexOfon==0?eventName.substr(2):eventName;
var sp =scope||window; 🎜>var callArgs = Array.prototype.slice.call(arguments, 4); //5번째 매개변수부터 시작
callArgs = typeof(callArgs)!="undefine"?callArgs:[]
var 대리자 = fn.createDelegate(callArgs,sp);//JCore는
if (el.addEventListener){//대기열 순서로 실행되는 Mozilla 시리즈를 지원합니다
el.addEventListener(enFX, Delegate, false);// 세 번째 매개변수는 트리거링 메소드와 관련됩니다.
} else if (el.attachEvent){//Mozilla 계열이 아닌 경우 스택 순서로 실행됩니다. (나중에 추가된 이벤트가 먼저 실행됩니다.)
el.attachEvent(enIE, Delegate) ;
}
//fn 메소드에 대한 태그를 생성하고 이벤트 삭제 시 사용합니다. " time.getMinutes() time.getSeconds() time.getMilliseconds();
}
if (!el.id){
el.id = JCore.id(el,null);
}
//대리인 표시, 이벤트 바인딩 삭제 시 사용
var AttName = this.getCacheAttName( enFX,fn.uid);
this.cache.setCache(el.id,AttName,delegate );
},
unbind : function(el,eventName,fn){//요소에 대한 이벤트 바인딩 해제
if(typeof(el)=="undefine"||el==null) return;
var indexOfon = eventName.toString().toLowerCase().indexOf("on")
var enIE = indexOfon==0?eventName:"on" eventName;
var enFX = indexOfon ==0?eventName.substr(2):eventName
var AttName = this.getCacheAttName(enFX,fn.uid) ;
var 대리자 = this.cache.getCache(el.id,AttName);
if(delegate){
if (el.removeEventListener){//Mozilla 시리즈
el.removeEventListener(enFX , 위임, false);
} else if (el.detachEvent){//non Mozilla 시리즈
el.detachEvent(enIE, 위임)
}
}
//이벤트 삭제 캐시
this.cache.removeCache(el.id,AttName);
}
}
JCore.apply(JEvents,JEventsExtendMethod)
/*------- ----------- ---이벤트에 대한 매개변수 래퍼------ --------------*/
var JEventWrap = 함수(이벤트){
this.xtype="EventWrap"
this.data=null
this.srcElement = null; //이벤트가 발생한 문서 요소
this.button = null / /[FX:0-왼쪽 버튼, 1-오른쪽 버튼][IE:1-left; 버튼, 오른쪽 버튼 2개, 가운데 버튼 4개] (onmousedown, onmouseup, onmousemove에만 유효)
this.type = null
this.clientX = 0 //마우스 포인터 상대 X 좌표; 클라이언트 영역 또는 브라우저 창(표준 속성)
this.clientY = 0; //클라이언트 영역 또는 창의 브라우저 Y 좌표에 상대적인 마우스 포인터(표준 속성)
this.offsetX = 0; //소스 요소(호환 속성)를 기준으로 한 마우스 포인터의 X 좌표(IE)
this.offsetY = 0; //소스 요소(호환성 속성)를 기준으로 한 마우스 포인터(IE)
this.screenX = 0; //사용자 디스플레이의 왼쪽 상단을 기준으로 한 마우스 포인터의 X 좌표(호환성 속성)(FX)
this.screenY = 0 //마우스 포인터의 Y 좌표 사용자 디스플레이의 왼쪽 상단 기준(호환성 속성)(FX)
this.altKey = false; //Alt 키인지
this.ctrlKey = false; //Ctrl 키인지
this.shitfKey = false; //Shift 키 여부
this.keyCode = 0;
this.originaEvent = null; //래핑 해제된 원본 이벤트 객체
/*--구성- -- --*/
if(event){
if(event.srcElement){//IE
this.srcElement = event.srcElement;
this.offsetX = event.offsetX; this.offsetY = event.offsetY;
this.button = event.button;
}
else{
this.srcElement = event.target;
clientX - event.target.offsetLeft;
this.offsetY = event.clientY - event.target.offsetTop
}
this.type = event.type;
event.altKey ; 🎜>this.ctrlKey = event.ctrlKey;
this.shitfKey = event.shitfKey;
this.clientX = event.clientX;
this.clientY = event.clientY; event.screenX;
this.screenY;
this.keyCode = event.keyCode;
this.originaEvent = 이벤트
}


JCore.js 파일에 대한 이전 블로그를 참조하세요:
객체 지향 Javascript 핵심 지원 코드