배경
JavaScript에서 addeventListener () 또는 att
1. addeventListener () 또는 att
코드 사본은 다음과 같습니다. var obtn = document.getElementById ( 'btn');
obtn.addeventListener ( 'click', function () {
경고 ( '버튼이 클릭되었습니다')
},거짓)
obtn.reomveeventListener ( 'click', function () {
경고 ( '버튼이 클릭되었습니다')
},거짓)
// 익명 함수가 전달되어 OBTN의 이벤트를 제거 할 수 없습니다.
2. IE6-IE8에서, 다중 이벤트의 역 순서 실행 문제는 첨부 이벤트 ()를 사용하여 제한됩니다.
코드 사본은 다음과 같습니다.
var obtn = document.getElementById ( 'btn');
obtn.attachevent ( 'onclick', function () {
경고 (1)
})
obtn.attachevent ( 'onclick', function () {
경고 (2)
})
obtn.attachevent ( 'onclick', function () {
경고 (3)
})
// eie9+ 실행 순서 1, 2, 3
// IE6-IE8 3, 2, 1에 따른 실행 주문
문제를 해결하십시오
나중에 재사용 할 수 있도록 크로스 브라우저 이벤트 바인딩 모듈을 작성하고 동시에 항소 문제를 해결하고 싶습니다. JQuery는 이벤트 큐 및 데이터 캐싱 메커니즘을 사용 하여이 문제를 해결합니다. 관련 소스 코드를 살펴 보았습니다. 정말 복잡했습니다. 나는 몇 가지 방법을 직접 시도하고 간신히 구현했습니다. 코드는 객체 지향에 게시되며 사람들이 복잡하게보고 싶지 않으므로 구성하여 기능으로 변경합니다.
코드 사본은 다음과 같습니다.
/*바인딩 이벤트 인터페이스
*
*@param {dom-dom} 및 {type-string} 및 {fn-function} 선택적 매개 변수 {fnname-string}
*@execute 이벤트 큐를 생성하여 DOM 객체 속성에 추가하십시오.
이벤트 핸들러 (기능)를 이벤트 큐에 추가하십시오
지정된 이벤트 핸들러를 삭제하기 위해 이벤트 핸들러에 식별자를 추가 할 수 있습니다.
*/
함수 바인드 (dom, type, fn, fnname) {
dom.eventqueue = dom.eventqueue || {};
dom.eventqueue [type] = dom.eventqueue [type] || {};
dom.handler = dom.handler || {};
if (! fnname) {
var index = queuelengrength (dom, type);
dom.eventqueue [type] [ 'fnqueue'+index] = fn;
}
또 다른 {
dom.eventqueue [type] [fnname] = fn;
};
if (! dom.handler [type]) bindevent (dom, type);
};
/*바인딩 이벤트
*
*@param {dom-dom} 및 {type-string}
*@execute events는 한 번만 바인딩되며, 핸들러는 실행 이벤트 큐에서 이벤트 처리기 (기능)를 가로 지르는 데 사용됩니다.
*@발신자 바인드 ()
*/
함수 bindevent (dom, type) {
dom.handler [type] = function () {
for (dom.eventqueue의 var guid [type]) {
dom.eventqueue [type] [Guid] .call (dom);
}
};
if (window.addeventListener) {
dom.addeventListener (type, dom.handler [type], false);
}
또 다른 {
dom.attachevent ( 'on'+type, dom.handler [type]);
};
};
/*이벤트의 인터페이스를 제거합니다
*
*@param {dom-dom} 및 {type-string} 선택적 매개 변수 {fnname-function}
*@execute 식별자가없는 경우 Unbindevent ()를 실행하십시오.
식별자가 있으면 지정된 이벤트 핸들러가 삭제됩니다. 이벤트 큐 길이가 0이면 Unbindevent ()가 실행됩니다.
*/
함수 Unbind (dom, type, fnname) {
var hasqueue = dom.eventqueue && dom.eventqueue [type];
if (! hasqueue) 반환;
if (! fnname) {
Unbindevent (dom, type)
}
또 다른 {
DOM.EVENTQUEUE [type] [fnname] 삭제;
if (queuelength (dom, type) == 0) Unbindevent (dom, type);
};
};
/*이벤트를 제거합니다
*
*@param {dom-dom} 및 {type-string}
*@execute bound 이벤트 핸들러를 제거하고 이벤트 큐를 지 웁니다.
*@발신자 Unbind ()
*/
함수 Unbindevent (dom, type) {
if (window.removeeventListener) {
dom.removeeventListener (유형, dom.handler [type])
}
또 다른 {
dom.detachevent (type, dom.handler [type])
}
DOM.EVENTQUEUE 삭제 [유형];
};
/*판사 이벤트 대기열 길이
*
*@param {dom-dom} 및 {type-string}
*@caller bind () unbind ()
*/
함수 queuelengrength (dom, type) {
var index = 0;
for (dom.eventqueue [type]의 var 길이) {
색인 ++;
}
리턴 인덱스;
};
사용 방법
코드 사본은 다음과 같습니다.
var obtn = document.getElementById ( 'btn');
// 바인딩 이벤트
// 버튼에 대해 3 번의 클릭 이벤트 기능을 동시에 바인딩합니다.
// IE6-IE8에 따른 실행 순서는 변경되지 않았습니다
bind (obtn, 'click', function () {
경고 (1);
})
bind (obtn, 'click', function () {
경고 (2);
}, 'myfn')
bind (obtn, 'click', function () {
경고 (3);
})
// 이벤트를 제거합니다
// 모든 바운드 클릭 이벤트 함수 제거, 익명 함수 제거 지원
Unbind (obtn, 'click')
// 식별자 myfn이있는 이벤트 함수 만 제거합니다
Unbind (obtn, 'click', 'myfn')
프로그램 아이디어
이 프로그램의 주요 아이디어는 전 세계 환경을 오염시키지 않으면 서 DOM 요소 개체의 속성으로 이벤트 큐를 DOM 요소 객체의 속성으로 추가하는 것입니다. 이를 통해 상이한 이벤트 유형에 바인딩되는 다른 DOM 요소의 여러 이벤트 기능의 데이터 저장 문제를 해결할 수 있습니다.
코드 사본은 다음과 같습니다.
// dom 요소의 이벤트 큐
돔 {
Eventqueue : {
'클릭': {
fnqueue1 : 기능,
myfn : 기능,
fnqueue3 : 기능
}
'마우스 오버': {
fnqueue1 : 기능,
fnqueue2 : 기능
}
}
}
매번 이벤트 함수가 해당 이벤트 유형의 이벤트 큐에 먼저 추가되며 이벤트는 한 번만 제한됩니다. 이벤트가 트리거되면 핸들러 이벤트 기능이 실행되고 핸들러는 실행 이벤트 큐에서 이벤트 기능을 통과합니다.
Unbind () 수신 식별자가없고 익명 함수를 제거하는 경우 모든 바운드 이벤트 기능을 제거하며 식별자가있는 경우 지정된 이벤트 기능을 제거합니다.
프로그램 논리는 복잡하지 않으며 버그 및 성능 문제가있을 수 있습니다. 관심이 있으시면 안내하고 의사 소통 할 수 있습니다.