JSバブリングイベントとイベントリスニングの使用法分析_JavaScriptスキル

バブルイベント
jsの「バブルイベント(バブル)」は、​​jsの一連のイベントを実行するための仕組みであり、プログラミングにおける古典的な問題です。バブル アルゴリズムの「バブル」は、正確には交換と言うべきですが、js の「バブル イベント」は、DOM の最下位レベルからツリーを階層ごとにたどってアタッチします。対応するイベント。次のコードを例に挙げます:

<title>バブルイベント</title> <div onclick="Add('div事件触发 ')"> <p onclick="Add('p事件触发 ')" style="background:#c00;"> </p>クリック</div> <div id="Console" style="border:solid 1px #ee0; background:#ffc;"> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

Viewランニング効果
イベント監視
正確に言うと、イベント監視は、ユーザーのマウス、キーボード、ウィンドウのイベントやその他のアクションを監視するための JS エンジンの操作、つまりイベントをイベントに添付することであると言えます。ユーザーの対応する操作は、btnAdd.onclick="alert('51obj.cn')" に似ています。これは単純なイベントの添付ですが、このメソッドは複数のイベントの添付とイベントの削除をサポートしていません。次のコードは、(IE で) イベントをアタッチした後のイベントの削除を実装します:

<p id="pContent" style="border:solid 1px #d00; background:#cff;"> </p> クリック
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

View実行結果

IE は標準 DOM ブラウザとは言えません。Firefox や Opera などの標準 DOM と比べると「異質」です。イベント リスニング機能と呼ばれる機能が存在するのは Firefox だけです。 addEventListener (次の例に示すように)<button id="btn"></button>
クリック

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

View実行中の効果 上記の 2 つの例から、Firefox ではattachEvent がサポートされておらず、IE では addEventListener がサポートされていないことがわかります。そのため、互換性のあるメソッドを使用する必要があります。 <button id="btn"> </button>
www.jb51.net»»

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]