DomEvent

1900 ワード

[TOC]
DomEvent
第一章:事件を知る
1.1事件の概要
JavaScriptとHTMLの相互作用はイベントを通じて実現され、イベントは文書またはブラウザのウィンドウで発生する特徴的なインタラクティブ瞬間であり、イベントが発生した時に対応するコードを実行するために、リスタまたは処理プログラムを使用してイベントを予約することができる.

  ，                 。

   ：click、load        。

イベント3要素:
1.イベントソース
2.イベントの対象
3.イベントハンドラ(モニター)
1.2イベントフロー
イベントフローは、ページからイベントを受信する順序を記述する.

      ：         (    DOM    )

    #1.     
 1:

             mouseleave  


   p   div     mouseover  ，     p  ，      div     ，     :
    p      
    div      
    
#      div       ？            ，p     mouseover，            mouseover  ，      mouseover          
mouseenter               ，            (   )

マイクロソフトの考え:
事件の広がりは内から外へ広がった

#####   2.

ネットスケープ社は次のように考えています.
事件の伝播は内に外に伝播する

#####   3.DOM

「DOM 2レベルイベント」で規定されているイベントフローは、三つの段階を含みます.イベントの捕獲段階、目標段階、およびイベントの発泡段階です.
注意:IE 9、Opera、Firefox、Chrome、SafariはDOMイベントフローをサポートします.IE 8およびより早いバージョンはDOMイベントフローをサポートしていません.
現在のすべてのブラウザはデフォルトでは発泡段階でトリガされます.もちろんトリガ段階も変更できます.
第二章:イベントハンドラ
イベントハンドラとは、応答イベントの関数です.イベントハンドラの名前は「on」で始まります.
例えば、イベントclick-->イベントハンドラonclick
イベントmouseover->イベントハンドラonmouseover
注:イベントハンドラはすべて小文字です.

#### 2.1 HTML

直接にイベントハンドラをHTMLタグに書きます.
短所:内容と行為は分離されていません.コードの保守と修正に悪い影響があります.
処理方式1:
例えば:buttonにクリックイベントを追加します.

＊注:ラベルにalert()のような簡単な時間を追加するだけなら、この方式で**できます.
処理方式2:
JSでは、イベントを関数にパッケージし、イベントハンドラでこの関数を呼び出します.



    
        function showMsg () {
            alert("hello world");
        }

js単例モード