この記事の例では、JavaScript を使用してリスナーを追加および削除する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
js でのイベント監視は、addEventListener を使用してイベントをバインドすることです。この使用法は jquery では非常に一般的で簡単ですが、ネイティブ js ではより複雑になります。ここでは、addEventListener イベントの各メソッドのテストと例を示します。参照。
2日前にプレーヤーを操作していたときに、モニターを追加して削除した後、少し問題が発生しました。調べたところ、パラメーターが完全に一致している必要があることがわかりました。完全対応とはつまり、
ということですか？
$('.video')[0].addEventListener('timeupdate ', currentTimeHandler , true);
たとえば、この文では、削除するために 3 つのパラメータを渡す必要があります。なぜこのようにする必要があるのでしょうか。ここが難しい部分です。
追加と削除の場合、第 3 パラメータを記述する必要はありませんが、この時点でデフォルトの条件が異なります。 ！
通常、addEventListener は false...
1. カスタム イベント リスナーを追加します
vareventHandlesCounter=1;//イベントの数をカウントします。リスナーを追加、予約ビットとして 0
関数 addEvent(obj,evt,fn){
If(!fn.__EventID){ fn.__EventID=eventHandlesCounter;}
If(!obj.__EventHandles){ obj.__EventHandles=[] }
If(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
If(obj["on" evt] 関数のインスタンス){
obj.__EventHandles[evt][0]=obj["on" evt];
obj["on" evt]=handleEvents;
}
}
obj.__EventHandles[evt][fn.__EventID]=fn;
関数 handleEvents(){
var fns = obj.__EventHandles[evt];
for (var i=0;i
fns[i].call(this);
}
}
2. 削除イベント監視をカスタマイズします
function delEvent(obj,evt,fn){
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
false を返します;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
obj.__EventHandles[evt][fn.__EventID];
を削除します
}
}
3. 上記のメソッドを変更します
関数 addEvent(obj,evt,fn,useCapture){
if(obj.addEventListener){//优先使用 W3C イベント注册
obj.addEventListener(evt,fn,!!useCapture);
}その他{
if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter ;}
if(!obj.__EventHandles){ obj.__EventHandles=[];}
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on" evt]){
(obj.__EventHandles[evtype][0]=obj["on" evtype]).__EventID=0;
}
obj["on" evtype]=addEvent.execEventHandles;
}
}
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
if(!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
for (var i=0;i
if(fns[i] 関数のインスタンス){
fns[i].call(this);
}
}
};
関数 delEvent(obj,evt,fn,useCapture){
if (obj.removeEventListener) {///先使用 W3C のメソッド移除イベント处理関数数
obj.removeEventListener(evt,fn,!!useCapture);
}else {
if(obj.__EventHandles){
var fns = obj.__EventHandles[evt];
if(fns){fns[fn.__イベントID]を削除;}
}
}
4、标標準化イベント对象
function fixEvent(evt){
if(!evt.target){
evt.target = evt.srcElement;
evt.preventDefault=fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if(evt.type == "マウスオーバー"){
evt.relativeTarget = evt.fromElement;
}else if(evt.type == "mouseout"){
evt.relativeTarget = evt.toElement;
}
evt.charCode =(evt.type == "キープレス")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};
fixEvent 関数は個別に実行されるのではなく、1 つのイベント オブジェクト パラメータが必要で、イベント発生時にのみ実行されます。最も良い方法は、addEvent 関数の execEventHandles エリアに統合することです。
addEvent.execEventHandles = function (evt) {//遍历すべてのイベント処理関数数并执行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);// この里对で标標準化操作
var fns = this.__EventHandles[evt.type];
for (var i=0;i
if (fns[i] 関数のインスタンス) {
fns[i].call(this,evt);//そして、これをイベント処理関数の最初のパラメータとして扱います
// これは、イベント処理関数の内部で、ある方法を使用してイベントオブジェクトを取得できます } } };
上は高手写了、下は整理几个实际の监听事情の例
