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

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

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

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

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

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

input对象的Click事件执行环境截图コードをコピーします。

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

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;
}
}

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

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

著者別の最新記事