4

以下の簡単な div デモンストレーションを作成しました。これは、クリックすると何も表示されません。 

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

function toggle2(e) {

    var textx = (e.target) ? e.target : e.srcElement;
    textx.style.display = "none";

    console.log(e.target);
}

私の質問は、交換した場合の違いは何ですか

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

と

<div id="three" onclick="toggle2(this);return false;" style="background:#303; color:#FFF;">

上記の私の例では、どちらも正常に動作します.....

4

4 に答える 4

7

それらはまったく同じである可能性があります。これは HTML に依存します。この場合、常に要素になりthisます。イベントがキャプチャされる要素を参照します。ただし、イベントが発生した要素を指します。divthisevent.target

要素に子がない場合、それらは常に同じになります。ただし、次のような場合：

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
    <span>Line 1</span>
    Line 2
</div>

その場合、それらは異なる場合があります。クリックすると要素にLine 1なるため、その要素だけが非表示になります。event.targetspan

イベントが発生した要素を特に指定したくない場合は、 を使用する方がより直感的thisです。

于 2013-06-12T08:23:12.983 に答える
2

イベントは、現在発生しているイベントを参照します。ブラウザーでは、イベントは、イベントが発生した要素からその親にバブル アップされ、ドキュメント ルートに到達します。詳細:イベントのバブリングとキャプチャとは?

あなたの例では、イベントはクリック イベントを指し、event.targetはdivであり、これはdiv自体を指します。子要素をdivに追加して要素をクリックすると、event.targetは子要素を指し、これは引き続きdivを参照します。

于 2013-06-12T08:27:49.903 に答える