2 
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
#a {background-color:blue;width:100px;height:200px;}
#b {background-color:red;margin-left:25px;width:50px;height:100px;}
</style> 
<div id="a">a
    <div id="b">b</div> 
</div>
<script>
document.getElementById("a").onclick = function() {console.log("A is clicked");} 
document.getElementById("b").onclick = function(event) {console.log("B is clicked");event.stopPropagation();} 
document.onclick = function() {console.log("Document is clicked");} 
</script>
</body>
</html>

質問:

1.function(event)はevent仮パラメータ、実パラメータは何ですか? 実際のパラメータはどのようにイベントに渡されましたか? 通常、以下のスタイルでパラメーターを使用するためです。

function method(int num){ //num is the formal
/*implementation*/
}

//in main
method(42); //42 is the actual
  1. コンソールで div a をクリックすると、次のように表示されます。
A is clicked
Document is clicked

結果はこうあるべきだと思った

Aがクリックされた
Bがクリックされた

これは私の考えです: div a をクリックすると、document.getElementById("a").onclick実行され、次にdocument.getElementById("b").onclick実行されます。event.stopPropagation();これは、div b で停止し、実行されないためdocument.onclickです。しかし、このようには機能しないようです。

4

3 に答える 3

0

イベントの伝播とは、ドキュメント オブジェクトまでの祖先チェーンにイベントをバブルアップすることを意味します。

したがって、あなたの場合、要素 a に添付されたイベントとドキュメントの両方が発生します。要素 b をクリックすると、要素 b のみに関連付けられたイベントが発生します。これは、その時点以降の伝播が妨げられるためです。

于 2013-06-27T09:48:41.073 に答える
0

はeventブラウザ イベントです。実際に変更することはできませんが、クロージャーを使用するか、データ属性を使用して、イベント ハンドラーにより多くのデータを渡すことができます。A をクリックすると、正しい結果が得られました。イベントは、ドキュメントのルート要素に到達するまで上方にバブルします。伝播を停止すると、親要素への上方へのバブリングが防止されます。クリックbすると、上向きに泡立ち、a次にbody. ただし、伝播を停止するbため、唯一の出力は

B is clicked

推奨事項はありますが、eventオブジェクト自体はブラウザごとに異なります。メソッドやその他のプロパティをサポートしていないブラウザーもあります (たとえば、古い IE は DOM レベル 2 仕様を完全にはサポートしていません)。stopPropagationpreventDefault

于 2013-06-27T09:57:39.693 に答える