>웹 프론트엔드 >JS 튜토리얼 >익명 function_javascript 기술을 지원하는 Javascript 이벤트 리스너를 캡슐화합니다.

익명 function_javascript 기술을 지원하는 Javascript 이벤트 리스너를 캡슐화합니다.

WBOY
WBOY원래의
2016-05-16 16:46:041304검색

모두가 js에서 이벤트 모니터링을 많이 사용합니다. 브라우저가 addEventListener 및 attachmentEvent를 지원하는지 확인하는 것입니다. 온라인에서 찾을 수 있는 이벤트 모니터링 방법 중 일부는 완벽하지 않습니다. 아래 방법은 이벤트 바인딩 취소 시 일부 작업을 수행한 것을 제외하고는 이벤트 리스너 추가와 동일하며, 이제 익명 함수 사용을 지원하므로 이벤트 바인딩 시 별도로 함수 이름을 지정할 필요가 없습니다.


메인 코드:

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

/*이벤트 바인딩 및 바인딩 해제*/
var handlerHash = {};
var 바인딩 = (function() {
if (window.addEventListener) {
return function( el, type, fn, 캡처) {
el.addEventListener(type, function(){
fn();
handlerHash[type] = handlerHash[type] || [];
handlerHash [type].push(arguments.callee);
}, 캡처);
};
} else if (window.attachEvent) {
반환 함수(el, type, fn, 캡처) {
el.attachEvent("on" 유형, function(){
fn();
handlerHash[type] = handlerHash[type] || [];
handlerHash[type].push (arguments.callee);
});
};
}
})();
var unbind = (function(){
if (window.addEventListener) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handlerHash[type].length;
for (i; i el.removeEventListener(type, handlerHash[type][i]);
}
};
};
} else if (window.attachEvent) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handlerHash[type].length;
for (i; i el.detachEvent("on" 유형, handlerHash[유형][i]);
}
};
};
}
})() ;

원리 분석:

handleHash는 해시 테이블 캐시 이벤트로 작동합니다. handlerHash['이벤트 이름']은 여러 이벤트 수신 방법을 추가하는 배열입니다. 어떤 이벤트를 바인딩 해제할 때, handlerHash['이벤트 이름'] 배열을 순회한 후 제거하세요.

용도:

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

바인드(obj,'click',function(){
경고('클릭');
});
unbind(obj,'click');
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.