js は関数バインディング テクノロジを使用してイベント ハンドラーのスコープを変更する_JavaScript ヒント

1 つ目で最も一般的な方法は、イベント ハンドラーと同じ名前の HTML 属性を指定して、イベントを HTML タグに直接登録する方法です。コードは次のとおりです:

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

function eventHandler() {
alert("現在のスコープは入力要素自体です");
}

2 番目の方法は、関数を割り当てることです。イベントハンドラー属性。このようにして、まず要素オブジェクトが取得されます。 一般的なコードは次のとおりです。

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

> ;


3 番目の方法は、DOM2 レベルのイベント処理メソッド addEventListener および RemoveEventListener を使用することです。IE ブラウザに対応するメソッドは、attachEvent および detachEvent です。イベントを登録するコードは次のとおりです:

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

上記の 3 つの方法で入力要素のクリック イベント ハンドラーを登録する場合の欠点の 1 つは、このハンドラー (this) のスコープが常に入力オブジェクト内にあることです。オブジェクト指向プログラミングでは、これを特定のスコープで明示的に指定する必要があります。 これのスコープを変更するには、jsのバインディング関数技術を利用する必要があります。
いわゆる「バインド関数」とは、特定の環境で指定されたパラメーターを使用して別の関数を呼び出すことができる関数を作成することで、関数を変数として渡しながら関数を維持するためにイベント ハンドラーとうまく併用できます。関数のスコープ (これの実行環境も)。バインド関数の定義形式は次のとおりです。

コードをコピーします。


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

function binding( fn,scope) { return fn.apply(scope||this,arguments); }

このバインディング関数は 2 つのパラメーターを受け入れます。関数を実行する必要があります。2 番目の関数は特定の実行環境であり、指定されたスコープ内の指定された関数を呼び出し、すべてのパラメーターをまとめて渡す関数を返します。バインディング関数テクノロジと DOM2 レベルのイベント ハンドラーを使用すると、特定のスコープで実行される要素のイベント ハンドラーを登録できます。具体的な処理方法は次のとおりです。

まず、以前に定義した登録イベント メソッドを次のように変更します。

コードをコピーします


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

function addHandler(obj, type, handler,scope) { function fn(event) { var evt = イベント イベント : window.event ? 🎜>evt.target =event.target ||event.srcElement; return handler.apply(scope || this,arguments); obj.eventHash = obj.eventHash {}; //これは必須です イベント ハンドラーを登録するオブジェクトは、イベントを保存するハッシュ オブジェクトを定義し、イベント ハンドラーとスコープをイベント タイプのキューに保存します

(obj.eventHash [type] = obj.eventHash [タイプ] || [ ]).push({ "名前": タイプ, "ハンドラー": ハンドラー, "fn": fn, "スコープ": スコープ }); obj.addEventListener(type , fn, false);

} else if (obj.attachEvent) {
obj.attachEvent("on" type, fn); else {
obj[" on" type] = fn;
}
}


変更された登録イベント メソッドを使用すると、要素のイベント ハンドラーを指定された環境で実行できます。

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

> ;

上記のコードが実行されると、ハンドラーeventHandlerのthisスコープはwindowオブジェクトの下にあります。

先ほど紹介したバインディング関数によるイベント登録では、要素オブジェクトに対してイベントハンドラを保存するためのイベントハッシュオブジェクトが作成され、緊急時に要素がイベントハンドラを削除する際にこのハッシュオブジェクトが起動されます。状況に応じて、対応するイベント ハンドラーを正確に削除できます。イベント ハンドラーを削除するコードは次のとおりです:

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

function RemoveHandler ( obj, type, handler,scope) {
obj.eventHash = obj.eventHash ||
var evtList = obj.eventHash [タイプ] || len = evtList。 length;
if (len > 0) {
for (; len--; ) {
var curEvtObj = evtList[len];
if (curEvtObj.name == type && curEvtObj. handler === ハンドラー && curEvtObj.scope === スコープ) {
if (obj.removeEventListener) {
obj.removeEventListener(type, curEvtObj.fn, false); else if (obj. detachEvent) {
obj.detachEvent("on" タイプ, curEvtObj.fn);
} else {
obj["on" タイプ] = null; len, 1);
break;
}
}
}


これで、関数バインディングテクノロジを使用してイベントハンドラーを登録する方法の紹介は終わりです。特定の実行環境。同様に、関数バインディングを使用して、特定の実行環境でコールバック関数を実行できるようにすることもできます。

この記事の著作権は著者に帰属しており、転載は歓迎します。ただし、この記述は著者の承諾なしに保持し、原文へのリンクを目立つ位置に表示する必要があります。それ以外の場合は、法的責任を追及する権利が留保されます。