JavaScriptイベントについて話すとき、イベントバブル、イベントキャプチャ、デフォルトイベントのブロック、インタビューであろうと毎日の仕事の3つのトピックを回避することは困難です。
1。イベントバブル
コードを見てみましょう。
var $ input = document.getElementsBytagname（ "input"）[0]; var $ div = document.getElementsbytagname（ "div"）[0]; var $ body = document.getelementsbytagname（ "body"）[0]; $ input.onclick = function（e）{this.style.border = "5px solid red" var e || window.e; alert（ "red"）} $ div.onclick = function（e）{this.style.border = "5px solid green" alert（ "green"）} $ body.onclick = function（e）{this.style.border = "HTMLコード
<div> <入力タイプ= "button" value = "テストイベントバブル" /> < /div> "red"、 "green"、 "Yellow"が順番にポップアップします。
あなたの当初の意図は、ボタン要素をトリガーすることですが、親要素に縛られたイベントと一緒にトリガーされます。これがイベントバブルです。
入力へのバインディングのイベントが次のように変更された場合：
$ input.onclick = function（e）{this.style.border = "5px solid red" var e = e || window.e;アラート（ "red"）e.StopPropagation（）;}現時点では、イベントがバブルされないようにするため、「赤」のみがポップアップします。
2。イベントキャプチャ
イベントが泡立っているため、イベントのキャプチャが発生する可能性があります。これは逆のプロセスです。違いは、上部要素からターゲット要素まで、またはターゲット要素から上部要素へです。
コードを見てみましょう：
$ input.addeventlistener（ "click"、function（）{this.style.border = "5px solid red"; alert（ "red"）}、true）$ div.addeventlistener（ "click"、function（）{this.style.border = "5px solid緑"; function（）{this.style.border = "5px solid Yellow";この時点で、「黄色」、「緑」、「赤」が1つずつポップアップします。これはイベントのキャプチャです。
3.デフォルトのイベントをブロックします
Aタグなど、HTML要素にはいくつかのデフォルトの動作があり、クリック後にジャンプアクションがあります。フォームの送信タイプ入力には、デフォルトの提出ジャンプイベントがあります。リセットタイプの入力には、リセットフォームの動作があります。これらのブラウザのデフォルトの動作をブロックする場合、JavaScriptはメソッドを提供します。
var $ a = document.getElementsByTagname（ "a"）[0]; $ a.onclick = function（e）{alert（ "ジャンプアクションは私によってブロックされました"）e.preventdefault（）; // falseを返す; //それも可能です} <a href = "http://keleyi.com"> ke leyi </a>デフォルトのイベントはなくなりました。return falseとe.preventdefault（）は同じ効果があるため、違いはありますか？もちろんあります。
イベントホストのデフォルトの動作は、HTMLイベント属性とDOM0レベルのイベント処理方法でのみ編成できます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。