JavaScriptにおけるイベントの伝播捕捉、発生、泡立ち

1551 ワード

JavaScript html

まず、一つの事件が発生した時、一つの事件はいつも一つの事件源があります.つまり、この事件を誘発した対象は一つの事件が無条件に発生することができません.これは事件の発生です.
事件が発生すると、この事件は広がり始めます.なぜ伝播しますか?事件の原因自体は事件を処理する能力がないからです.例えば、ボタンを押すと、clickイベントが発生しますが、このボタン自体はこのイベントを処理できません.イベントはこのボタンから伝播しなければなりません.このイベントを処理できるコードに到達します.
イベントが伝搬中にその処理できる関数を見つけたとき、この関数がこのイベントを捉えたと言います.
ここで肝心な問題が来ました.一つの関数はどのように一つの事件を捉えますか?これは事件の泡立ちにかかわる.
泡の概念をよりよく理解するために、今はあなたの前にコップ一杯の水を置いていることを想像してみてください.しかし、この水は私たちが普段見ているものとは少し違って、数階に分けられています.各階はまた一つ以上の区域に分けられています.一番上の階は私たちが知っている窓の対象です.次の階はいくつかのエリアに分けられています.また、documentオブジェクトの次の層は複数のサブオブジェクトに分かれています.
これらの対象の階層関係はDOMの対象ツリーを構成している.
イベントの広がりには方向があり、ボタンをクリックした時に発生したイベントがこのボタンから上に伝播し始めます.(コップの底から泡が上がってきたように、これが事件の泡と呼ばれる原因です.).しかし、このイベントはいつも特定の属性に値があるかどうかを探しています.例えば、ボタンのclickイベントは、まず、ボタンにonclick属性の意味ある定義(すなわち、属性が存在する関数または実行可能なステートメントを指す)があるかどうかを探します.もしあれば、この関数またはステートメントを実行します.その後、イベントは上に進み、ボタンの上のオブジェクト(例えば、formオブジェクトやdocumentオブジェクト、つまりボタンを含む親オブジェクト)に到達し、オブジェクトがonclick属性を定義している場合、属性の値を実行します.
したがって、このボタンの上に3階(form、document、window)があり、この3つの階ではonclick属性が定義されている場合、ボタンのclickイベントが発生すると、4つの関数を呼び出したり、4つの文を実行したりします.
イベントのこれらの特性は、0レベルdomにおいても適用される.

<html onclick="alert('html')">
    <head>
        <title>Event Propagation Example</title>
    </head>
    <body onclick="alert('body')">
 
        <input type="button" value="Click Me" onclick="alert('input')" />
    </body>
</html>

javascript prototypeとconstractorの違い