イベントの概念
イベント：ドキュメントまたはブラウザウィンドウで発生する特定のインタラクションモーメントを指します。イベントが発生したときに対応するコードが実行されるように、リスナー（またはハンドラー）を介してイベントをスケジュールできます。
1。イベントフロー
1。イベントフロー：ページでイベントが受け入れられる順序について説明します
2。イベントバブル：最も特定の要素によって受信され、最も特定の要素のノードに段階的に上向きに伝播しました（ドキュメント）
3。イベントキャプチャ：最も特定のノードが最初にイベントを受信しますが、最も特定のノードは最後にイベントを受信する必要があります。
2。イベント処理
1.HTMLイベント処理：HTML構造に直接追加します
2。DOM0レベルイベント処理：イベントハンドラー属性に関数を割り当てる
3。DOM2レベルのイベント処理：
addeventListener（ "イベント名"、 "イベントハンドラー機能"、boolean value）
True：イベントキャプチャ
false：イベントバブル
removeEventListener（）;
4。IEイベントハンドラー
AttachEvent
DeTachevent
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> </head> <body> <div div "div"> <ボタンid = "btn1">ボタン</button> </div> <！ - <<script> function demo（）{alert（< btn1 = document.getElementById（ "btn1"）; btn1.onclick = function（）{alert（ "hello dom0 levelイベントハンドラー"）}; // btn1.onclick = function（）{alert（ "hello dom0 levelイベントハンドラー2"）}; 3 "）}; </script> - > <！ - <script> var btn1 = document.getElementByid（" btn1 "）; btn1.addeventlistener（" click "、demo1）; btn1.addeventlistener（" click "、demo2）; btn1.addeventlistener（" "" demo1（）{alert（ "dom2レベルイベントハンドラー1"）;} function demo2（）{alert（ "dom2レベルイベントハンドラー2"）;} function demo3（）{alert（ "dom2レベルイベントハンドラー3"）;} document.getElementById（ "btn1"）; if（btn1.addeventlistener）{btn1.addeventlistener（ "click"、demo）;} else if（btn1.attachevent）{btn1.attachevent（ "onclick"、demo）} demo（）{alert（ "hello"）;} </script> </body> </html>iii。イベントオブジェクト
1。イベントオブジェクト：DOMイベントがトリガーされると、オブジェクトが生成されます。
2。イベントオブジェクトイベント：
タイプ：イベントタイプを取得します
ターゲット：イベントターゲットを取得します
StopPropagation（）：イベントが泡から防止します
PreventDefault（）：イベントのデフォルト動作をブロックします
< id = "aid"> baidu </a> </div> <script> document.getElementbyId（ "btn1"）。addeventlistener（ "click"、showtype）; document.getElementbyid（ "div"） showtype（event）{// alert（event.type）; alert（event.target）; event.stoppropagation（）; // stop event bubbles} function showdiv（）{alert（ "div"）} function showa（// event.stoppropagation（）; //////////// event.preventdefault（）;} </script> </body> </html>