JavaScript学習メモ(5) イベントフローとイベント処理の関数割り当て

如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
  javaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《Javascript高级程序设计》一书提到:
    DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。事情到底是不是这样呢？观察下面的程序：

 
   
   
   
 
 
   

click me!

IE: Click click me 実行シーケンスは次のとおりです: DIV-->BODY-->HTML ページの他の部分をクリックします: BODY-->HTML
FF : Click click me 実行シーケンスは次のとおりです: DIV-->HTML-->BODY ページの他の部分をクリック: HTML-->BODY
はは、本で言われていることとは違うようですね!プログラムの実行結果からわかることは、IE または Firefox のどちらの場合でも、イベントは常に最も正確な要素 (つまり、DOM ツリーの最も深いノード) によって最初にトリガーされ、次に IE および FireFox でバブリングを開始するということです。 。 捕獲。

JavaScript では、イベント処理関数を割り当てる 3 つの方法が提供されています。最初の方法は、上記のプログラムと同様、HTML コードでイベント処理関数を割り当てる方法です。
2 番目の方法は、JavaScript でイベント処理関数を割り当てる方法です。このメソッドでは、まずイベント処理関数が割り当てられる要素への参照を取得する必要があります。次のプログラムを参照してください。
1 window.onload = function () { bar odiv = document.getElementById（ "contentDiv"）;
3odiv.onclick = function（）{alert（odiv。-要素への参照が取得されたことが保証されているため、このプログラムはオンクリックイベントを配置しますonload イベント内で oDiv を定義しないと、oDiv が定義されていないことが報告されます。もう 1 つの注意点は、このイベント処理関数の割り当て方法を使用する場合、特定のイベントに割り当てられる関数は 1 つだけであり、イベント関数の署名は小文字である必要があります。そうしないと、以前に割り当てられた関数が後の関数によって上書きされます。同じイベントに複数の処理機能を割り当てる場合は、3 番目のイベント処理機能の割り当て方法を使用する必要があります。
IE では、obj.attachEvent() メソッドを使用して要素に関数を割り当て、obj.detachEvent() メソッドを使用して要素のイベント処理関数をデタッチしますが、DOM (例として FireFox を取ります) では、 addEventListener() メソッドを使用して関数を割り当て、removeEventListener() メソッドを使用して関数を切り離します。 alert（odiv.innerhtml）;
5}
6 var func2 = function（）{
if（odiv.attachevent）{
11odiv.attachevent（ "onclick"、func1）; "onclick",func2);
13 //oDiv.detachEvent("onclick",func1);
14 } else if(oDiv.addEventListener){
15 //FireFox
16 //FireFox addEventListener("click",func1 ,true);
17 oDiv.addEventListener("click",func2,true);
18 //oDiv.removeEventListener("click",func1,true);
19 }
20
21 } これの違いを説明しましょうIE および FireFox でのイベント処理関数:
1. 関数の最初のパラメーターには、IE ではプレフィックスとして「on」が必要ですが、FF では不要です。 次の処理関数の署名は小文字である必要があります。
2. FireFox の addEventListener() 関数の 3 番目のパラメータは次のことを表します。 true はキャプチャ フェーズでイベント処理関数を追加することを意味し、false はバブリング フェーズでイベント処理関数を追加することを意味します。ただし、FireFox はバブリング イベント ストリームをサポートしていないため、ここではTrueにしてもFalseにしても違いはないようです。ただし、注意すべき点が 1 つあります。addEventListener() の 3 番目のパラメーターが true に設定されている場合、removeEventListener() メソッドの 3 番目のパラメーターも同じ値に設定する必要があります。そうしないと、メソッドは失敗します。
3. 実行フェーズでは、IE は最後に追加されたイベント処理関数を最初に実行し、次に最後から 2 番目のイベント処理関数を実行します。ただし、FireFox では、IE とは逆に、イベント処理関数が次の順序で実行されます。実装されます。

上記はイベントフローとイベント処理の関数割り当ての内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。