検索

ホームページ  >  記事  >  ウェブフロントエンド  >  js は関数バインディング テクノロジを使用してイベント ハンドラーのスコープを変更する_JavaScript ヒント

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

WBOY
WBOYオリジナル
2016-05-16 17:57:511367ブラウズ

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


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