6

これは、要素のJavaScriptonchangeイベントの拡張について私が遭遇した質問です。条件付きでそれぞれに1つのonchangeイベントがアタッチされるいくつかのselect要素があります（特定の値に変更されると、特定の要素を非表示/再表示します）。別のonchangeイベントに条件付きで追加または追加して、既にアタッチされている以前の関数を変更または無効化せずに変更した場合にグローバル変数を設定できるようにします。追加の機能を「追加」したり、既存の機能に機能を追加したりする方法はありますか？

例は次のようになると私は信じています。

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    document.getElementById("selectbox1").onchange = function () { 
        //hides elements to reduce clutter on a web form ...
    }
}
....
if (<other conditions>) {
    document.getElementById("selectbox1").onchange = function2 () {
        //set global variable to false
    }
}

または、元の関数に1ライナーの「グローバル変数をfalseに設定」を追加したいだけです。

4

7 に答える 7

9

他の関数を呼び出す複合関数を使用するだけで不正行為を行うことができます。

document.getElementById("selectbox1").onchange = function() {
    function1();
    function2();
}

Pro JavaScriptDesignPatternsの本で説明されているオブザーバーパターンを使用することもできます。記事での使用例があります（ここ）。

//– publisher class — 
function Publisher() { 
    this.subscribers = []; 
};

Publisher.prototype.deliver = function(data) { 
    this.subscribers.forEach(function(fn) { fn(data); }); 
};

//– subscribe method to all existing objects 
Function.prototype.subscribe = function(publisher) { 
    var that = this; 
    var alreadyExists = publisher.subscribers.some(function(el) { 
        if (el === that) { 
            return; 
        } 
    });

    if (!alreadyExists) { 
        publisher.subscribers.push(this); 
    } 
    return this; 
};
于 2009-06-03T18:27:45.147 に答える
4

addEventListener()とattachEvent()関数（それぞれMozillaベースのブラウザとIEの場合）を確認します。

addEventListener（）およびattachEvent（）のドキュメントをご覧ください。

var el = document.getElementById("selectbox1");

try { //For IE
    el.attachEvent("onchange", function(){ code here.. });
}
catch(e) { //For FF, Opera, Safari etc
    el.addEventListener("change", function(){ code here.. }, false);
}

各要素に複数のリスナーを追加できるため、イベントの発生時に複数の関数を呼び出すことができます。

于 2009-06-03T18:35:03.620 に答える
2

jQueryを使用できますか？これにより、イベントを非常に簡単にバインド/操作/バインド解除できます。唯一の問題は、イベントハンドラーがバインドされた順序でアクティブ化されることです。

if (<certain conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

if (<other conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

また、ニーズが複雑な場合は、カスタムイベントのトリガーを調べることもできます。たとえば、onChangeを「解釈」する代わりに、カスタムイベントを具体的にトリガーする方法があるかもしれません。jQueryのページの最後の例を参照してください。

于 2009-06-03T18:36:48.390 に答える
2

jQUeryを使用すると、次のようになります。

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    $("#selectbox1").change(function () { 
        //hides elements to reduce clutter on a web form ...
    });
}
....
if (<other conditions>) {
    $("#selectbox1").change(function () { 
        //set global variable to false
    });
}

これは主にブラウザの互換性にも対応します。

于 2009-06-03T18:43:41.730 に答える
1

ご覧ください-https addEventListener: //developer.mozilla.org/en/DOM/element.addEventListener

于 2009-06-03T18:27:55.863 に答える
1

現在、イベントハンドラー（特定のイベントが検出されたときに起動される関数）を定義するための3つの異なるメソッドがあります。従来のメソッド、W3Cメソッド、およびMicrosoftメソッドです。

従来の方法

従来の方法では、イベントハンドラーは、Javascriptで要素のon eventプロパティを設定するか（サンプルコードで行っているように）、またはHTMLタグでon event属性を設定することによって定義されます（など<select onchange="...">）。これは使用するのが最も簡単な方法ですが、ご存知のように、かなり厳格であるため、現在では一般的に使用されていません。すでにイベントハンドラーがアタッチされている要素にイベントハンドラーを追加および削除するのは簡単ではありません。同様に、JavaScriptをHTMLと混合することはもはや適切な方法とは見なされていませんが、タグ内に含めるか、<script>タグを介してロードする必要があります。

W3C/Microsoftの方法

W3C（World Wide Web Consortium）とMicrosoftは、どちらも独自のイベントモデルを定義しています。2つのモデルは基本的に同じように機能しますが、構文が異なります。MicrosoftモデルはInternetExplorerで使用され、W3Cモデルは他のブラウザー（Firefox、Opera、Safari、Chromeなど）で使用されます。これらのモデルの両方で、イベントハンドラー（W3Cの場合はaddEventListener、Microsoftの場合はattachEvent）を追加し、イベントハンドラー（removeEventListener / detachEvent）を削除するための関数が提供されています。これにより、特定のハンドラーを要素に動的に追加および削除できます。あなたの場合、最初の条件に基づいて最初のハンドラーを追加し、2番目の条件に基づいて2番目のハンドラーを追加できます。これらの方法の「問題」は、2つあることです。したがって、イベントハンドラーがすべてのブラウザーに登録されるようにするには、両方のメソッドを使用する必要があります（2つのモデルの間にも微妙な違いがいくつかありますが、これらの違いはこの質問の範囲にとって重要ではありません）。実際、見てみると、必要に応じて両方のメソッドを使用する（通常、古いブラウザーの従来のメソッドにフォールバックする）多数の「addEvent」関数が見つかります。たとえば、2005年にQuirksModeブログでコンテストが実行され、最高の「addEvent」関数が作成されました。その結果は（優勝関数とともに）表示されます。必要に応じて両方の方法を使用する関数（通常、古いブラウザーの従来の方法にフォールバックします）。たとえば、2005年にQuirksModeブログでコンテストが実行され、最高の「addEvent」関数が作成されました。その結果は（優勝関数とともに）表示されます。必要に応じて両方の方法を使用する関数（通常、古いブラウザーの従来の方法にフォールバックします）。たとえば、2005年にQuirksModeブログでコンテストが実行され、最高の「addEvent」関数が作成されました。その結果は（優勝関数とともに）表示されます。ここ。

また、PrototypeやjQueryなどのjavascriptライブラリを使用する場合は、上記を処理する組み込みのイベント処理関数が付属しています。

于 2009-06-03T18:58:53.680 に答える
1

私はあなたの質問について何か重要なことを見逃しているように感じますが、このより単純な解決策はあなたにとってうまくいきませんか？

onChangeイベント内の条件を確認し、必要に応じてアクションを実行するだけです。eventListenersを動的に再追加/削除するよりもはるかに簡単です

document.getElementById("selectbox1").onchange = function () { 
    if (<certain conditions>) {       
     //hides elements to reduce clutter on a web form ...
    }
    if (<other conditions>) { ... }
}
于 2015-07-02T00:42:08.047 に答える