この記事では、JavaScriptでのリスニングの追加と削除の使用について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
JSでのイベントリスニングは、AddEventListenerを使用してイベントを結合することです。この使用法はjQueryでは非常に一般的で単純ですが、ネイティブJSではより複雑です。ここでは、参照と学習のためにAddEventListenerイベントのさまざまな方法のテストと例を整理します。
2日前にプレーヤーとして働いていたとき、モニターを削除するトラブルに遭遇し、削除できませんでした。見た後、パラメーターを完全に対応する必要があることがわかりました。完全に対応するとはどういう意味ですか？言い換えると：
コードコピーは次のとおりです。$（ '。ビデオ'）[0] .addeventListener（ 'timeupdate'、currentimeHandler、true）;
たとえば、この文で削除できるように、3つのパラメーターを渡す必要があります。なぜ必要なのですか？はい、痛みを伴う部分はここにあります：
追加して削除すると、3番目のパラメーターは無視できますが、現時点ではデフォルトの状況は異なります！ ！
通常、addeventlistenerは誤りです...
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] instanceof function）{
obj .__ eventHandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = handleEvents;
}
}
obj .__ eventHandles [evt] [fn .__ eventId] = fn;
function handleEvents（）{
var fns = obj .__ eventhandles [evt];
for（var i = 0; i <fns.length; i ++）
fns [i] .call（this）;
}
}
2。削除イベントのリスニングをカスタマイズします
コードコピーは次のとおりです。関数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 <fns.length; i ++）{
if（fns [i] instanceof function）{
fns [i] .call（this）;
}
}
};
function delevent（obj、evt、fn、usecapture）{
if（obj.removeeventlistener）{//最初にW3Cメソッドを使用してイベントハンドラーを削除します
obj.removeeventlistener（evt、fn、!! usecapture）;
}それ以外 {
if（obj .__ eventhandles）{
var fns = obj .__ eventhandles [evt];
if（fns）{delete fns [fn .__ eventid];}
}
}
4.イベントオブジェクトを標準化します
コードコピーは次のとおりです。関数fixevent（evt）{
if（！evt.target）{
evt.target = evt.srcelement;
evt.preventdefault = fixevent.preventdefault;
evt.stoppropagation = fixevent.stoppropagation;
if（evt.type == "mouseover"）{
evt.RelatedTarget = evt.fromelement;
} else if（evt.type == "mouseout"）{
evt.LelatedTarget = evt.toelement;
}
evt.CharCode =（evt.Type == "keypress"）？evt.keycode：0;
evt.eventphase = 2;
evt.timestamp =（new date（））。getTime（）;
}
evtを返します。
}
fixevent.preventdefault = function（）{this.returnvalue = false;}
fixevent.stoppropagation = function（）{this.cancelbubble = true;};
Fixevent関数は個別に実行されるのではなく、イベントオブジェクトパラメーターが必要であり、イベントが発生したときにのみ実行されます！最良の方法は、それを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 <fns.length; i ++）{
if（fns [i] instanceof function）{
fns [i] .call（this、evt）; //イベントハンドラー関数の最初のパラメーターとして使用します
//このようにして、統一された方法を使用して、イベントハンドラー関数内のイベントオブジェクトにアクセスできます}}};
上記はマスターによって書かれており、以下は実際の監視イベントの例です
コードを次のようにコピーします。
<html>
<head>
<title> test6.html </title>
<script type = "text/javascript">
function test（）{
window.alert（ "1回投票した"）;
document.getElementById（ "1"）。deTachevent（ "onclick"、test）;
}
</script>
</head>
<body>
<入力型= "button" value = "投票" id = "1"/>
<script type = "text/javascript">
document.getElementById（ "1"）。attachevent（ "onclick"、test）;
</script>
</body>
</html>
ここで、document.getElementById（ "1"）。attachevent（ "onclick"、test）;動的イベントのバインディングに使用され、コピーコードは次のように使用されます。
document.getElementById（ "1"）。dedachevent（ "onclick"、test）は時間を動的にキャンセルするため、このイベントは次回クリックすると効果が生成されません。
次に、入力が数字であるかどうかを判断するためにタイムリーに監視されているキーボードイベントの別のデモンストレーション。数字でない場合は、動的に促され、その入力を拒否します。
コードを次のようにコピーします。
<html>
<head>
<Title> test7.html </title>
<script type = "text/javascript">
関数テスト（イベント）{
//ユーザーがキーを押すたびに、彼はそれが数字であるかどうかを判断します
if（event.keycode <48 || event.keycode> 57）{
window.alert（ "あなたは数字を入力していません"）;
falseを返します。
}
}
</script>
</head>
<body>
<入力型= "text" onkeypress = "return test（event）;" />番号を入力してください
</body>
</html>
ここのイベントはイベントオブジェクトであり、多くの情報を返すことができます。詳細については、関連するドキュメントを参照してください。
サプリメント：イベントモニタリングの互換性
1。IEは、AttachEvent/Detacheventメソッドを使用して、イベントリスナーを追加および削除します。 W3Cは、AddEventListener/RemoveEventListenerメソッドを使用します。
2。IEはイベントにワンベントの命名方法を使用しますが、W3Cはイベントの命名方法です。
3。IEイベントリスナーはグローバルイベントオブジェクトを使用し、W3Cはイベントオブジェクトをリスナーのパラメーターとして渡します。
4。デフォルトのイベント動作のトリガーを避けるために、IEのアプローチは、プログラマーにイベントオブジェクトのreturnValueプロパティ値をfalseに設定するように要求することであり、W3CのアプローチはPreventDefaultメソッドを実行することです。
5。IEは、イベントキャプチャフェーズのサポートを提供していません。
6.イベント配信を停止するために、つまり、イベントオブジェクトのキャンセルバブブルをTrueに設定することですが、W3Cのアプローチは実行停止プロパゲーション法を設定することです。
7。IEはイベントリスナーを独立関数として呼び、W3Cではオブジェクトメソッドと呼ばれます。これは、IEでは、イベントリスナーのこのキーワードは、イベントが発生するオブジェクトではなく、役に立たないグローバルオブジェクト（ウィンドウオブジェクト）を指していることを意味します。
8。IEは、イベントリスナーを使用する際にメモリリークの問題を抱えています。 IEブラウザでは、要素のイベントリスナーを作成し、リスナーでその要素を使用する場合、リスナーが占有するメモリスペースと関連するDOMノードは、ユーザーが別のページに入る前にリリースされません。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。