0

同じページのさまざまなフォームにイベント委任を使用しようとしています。ただし、フォームを送信しようとすると、興味深い問題が発生します。

イベント委任が本質的にフォーム全体に「クリック」を設定することを十分に理解して、1つのフォーム（送信ボタン用）で「クリック」を試みました。

ただし、問題は、フォームまたはボタン要素だけでなく、実際には「クリック」イベントがページ全体に設定されているという事実から生じます。そのため、ページをクリックすると、フォームの「クリック」イベントがトリガーされます。そして、これはすべてのブラウザで発生しています。

「変更」イベントについても同じことが起こっています。フォームに「変更」イベントを設定すると、フォームの子フィールドと特定のフォーム ノード外の他のフィールドの両方に対してトリガーされます。

そのため、以前にイベント委任について質問されたことは知っていますが、実際にはこの問題には答えていません。それも問題ですか？たぶん、これはイベントの委任がどのように機能することを意図しているのでしょうか? しかし、そうであれば、ドキュメント全体に対してイベントがトリガーされるのはメモリの無駄ではありませんか? 解決策は何ですか？

また、純粋な Javascript での伝播を停止するクロスブラウザの方法はありますか? 私が見つけた最高のものはQuirksmode.orgでした：

function doSomething(e)
{    
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

トリガーされたときにイベントをタイプ別にフィルターできることは知っていますが、できることはそれだけですか? これを理解するのを手伝ってください！

編集：

特定の質問は、特定のフィールドでイベントを処理するためにイベントをフォームに委任すると、ドキュメントの残りのイベントもトリガーされるかどうかです。もしそうなら、これをどのように処理しますか？また、これがイベント委任の意図した動作でない場合、何が原因である可能性がありますか?

4

2 に答える 2

1

イベントは、その祖先を通じてバブルします。HTML 構造を持っている場合。

<div>
    <h2>
        <span>
            <input />
        </span>
        <strong>
            Blah
        </strong>

input...そして入力要素をクリックすると、クリックイベントが要素で発生し、その祖先 ( span、h2、div、 )bodyがバブルアップするのがわかりますdocument。祖先ではないため、 では起動しません。例についてはhttp://jsfiddle.net/2QQFS/strongを参照してください (ボックスの 1 つをクリックしてコンソールを見てください。<input />

<form />をネストしないでください。<form />各要素にイベント ハンドラーをアタッチし、他のフォームのトリガー イベントで他のフォームのイベントを確認する場合は、HTML ( http://validator.w3.org ) を検証して、見逃していないことを確認します。どこかの終了タグか何か。

イベントが発生した要素を確認するには、、e.targetおよびe.srcElement(IE < 8)を使用できます。

于 2013-05-26T21:22:02.480 に答える
0

イベントリスナーを登録する実際のコードは表示されていません。

このフィドルをpreventDefaultと stopPropagation で再生します。

自明であることを願っています。必要に応じてフィドルをフォークします。

form2.input にイベント リスナーがなく、イベントが outerDiv にバブリングしていることに注意してください。

form1 は、関連するユーザー コントロールに従って停止と防止を行うものです。

出力領域は、何が起こっているかを明確にする必要があります。

HTML

<div id="outerDiv">
<div>
    <input id="pd" value="1" type="checkbox">Prevent Default in form1 keydown</input>
</div>
<div>
    <input id="sp" value="1" type="checkbox">Stop Propagation in form1 keydown</input>
</div>
<div>
    <button id="clear">Clear Output</button>
</div>
<form id="form1" action="">
    <div>
        <label>input of form1
            <input type="text" />
        </label>
    </div>
</form>
<form id="form2" action="">
    <div>
        <label>input of form2
            <input type="text" />
        </label>
    </div>
</form> <pre id="output">
    watch this spot
</pre>
</div>

JS

window.addEventListener('DOMContentLoaded', function (event) {
// console.log("DOMContentLoaded event handler ...");
var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
var output = document.getElementById('output');
var div = document.getElementById('outerDiv');
var clear = document.getElementById('clear');
clear.addEventListener('click', function (event) {
    output.textContent = ('\n' + clear.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' clears output');
}, false);
console.dir(output);
div.addEventListener('keydown', function (event) {
    output.textContent += ('\n' + div.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
}, false);
form1.addEventListener('keydown', function (event) {
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
    // prevents default of generating an input event
    if (document.getElementById('pd').checked) {
        event.preventDefault();
        output.textContent += ('\n\t' + form1.localName + '\'s ' + event.type + ' event handler does preventDefault');
    }
    // stops propagation up to div
    if (document.getElementById('sp').checked) {
        event.stopPropagation();
        output.textContent += ('\n\t\t' + form1.localName + '\'s ' + event.type + ' event handler does stopPropagation');
    }
}, false);
form1.addEventListener('input', function (event) {
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
}, false);
}, false);
于 2013-05-26T23:35:14.983 に答える