匿名関数をサポートする Javascript イベント リスナーをカプセル化します_JavaScript スキル

ブラウザーが addEventListener とattachEvent をサポートしているかどうかを判断するためだけに、誰もが JS でイベント監視を頻繁に使用します。以下のメソッドはイベント リスナーを追加する場合と同じですが、イベント バインディングのキャンセル時に一部の操作が実行されるため、イベントをバインドするときに関数に別の名前を付ける必要がなくなりました。

メインコード:

コードをコピー コードは次のとおりです:

/*イベントのバインドとバインド解除*/
var handleHash = {};
var binding = (function() {
if (window.addEventListener) {
return function( el, type, fn, Capture) {
el.addEventListener(type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash [type].push(arguments.callee);
}, Capture);
};
} else if (window.attachEvent) {
return function(el, type, fn, Capture) {
el.attachEvent("on" type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push (arguments.callee);
});
};
}
})();
var unbind = (function(){
if (window.addEventListener) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i el.removeEventListener(type, handleHash[type][i]);
}
};
};
} else if (window.attachEvent) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i el.detachEvent("on" type, handleHash[type][i]);
}
};
};
}
})() ;

原理分析:

handleHash はハッシュ テーブル キャッシュ イベントとして機能します。 handleHash['イベント名'] は、イベントをアンバインドするときに複数のイベント リスニング メソッドを追加するための配列です。

使用:

コードをコピー コードは次のとおりです:

bind (obj,'click',function(){
アラート ('click');
});
unbind(obj,'click');