Javascript_javascriptスキルを使ったリスナーの追加・削除方法を詳しく解説

この記事の例では、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);//そして、これをイベント処理関数の最初のパラメータとして扱います
// これは、イベント処理関数の内部で、ある方法を使用してイベントオブジェクトを取得できます } } };

上は高手写了、下は整理几个实际の监听事情の例

复制代码代码如下:

<頭>

<スクリプトタイプ="text/javascript">
関数テスト(){
window.alert("あなたは一度投票しました");
Document.getElementById("1").detachEvent("onclick",test);
}





<スクリプトタイプ="text/javascript">
Document.getElementById("1").attachEvent("onclick",test);

ここでは、document.getElementById("1").attachEvent("onclick",test); が動的イベント バインディングに使用され、

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

document.getElementById("1").detachEvent("onclick",test)
動的時間をキャンセルすると、このイベントは 1 回だけ応答できるようになり、次回ボタンは再度クリックされなくなります。生産する。

以下は、入力が数値であるかどうかを判断するためにキーボード イベントを常に監視する別のデモです。数値でない場合は、動的にプロンプ​​トを表示し、入力を拒否します
。

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

<頭>

<スクリプトタイプ="text/javascript">
関数テスト(イベント){
//ユーザーがボタンを押すたびに数字かどうかを判定します
If(event.keyCode<48 ||event.keyCode>57){
window.alert("入力した内容は数字ではありません");
false を返します;
}
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：簡単にnodejsサーバーを作成する(10):アップロードされたimages_node.jsを処理する次の記事：簡単にnodejsサーバーを作成する(10):アップロードされたimages_node.jsを処理する

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル