javascript之事件詳解2

1.事件對象：

        在觸發DOM事件的時候都會產生一個對象。

2.事件對象event:

 (1)、type:獲取事件類型

 (2)、target:獲取事件目標

 (3)、stopPropagation():阻止事件冒泡

 (4)、preventDefault():阻止事件預設行為

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（針對2-（1））：

      <div id="div">

             <button id="btn1">按鈕</button>

      </div>

     <script>

            document.getElementById("btn").addEventListener("cilck",showType);  

            function showType(event){

                          alert(evet.type);

            }

     </script>

   結果：界面彈出提示框“cilck”.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（針對2-（2））：

    <div id=div>

              <button id="btn1">按鈕</button>

     </div>

     <script>

              document.getElementById("btn1").addEventListener("cilck",showType);

              function showType(event){

                           alert(event.target);

              }

    </script>

  結果：點擊按鈕，彈出提示框“object.HTMLButtonElement”

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（針對2-（3）（4））：

    <div  id="div">

                 <button  id="btn1">按鈕</button>

                 <a href="http://www.cnblogs.com/yanyuanyuan/">烽火戲諸諸諸侯</a>

    </div>

    <script>

              document.getElementById("btn1").addEventListener("click",showType);

              document.getElementById("div").addEventListener("click",showDiv);

              document.getElemetnById("aid").addEventListener("cilck",showA);

             function showType(event){

                           alert(event.type);

                           event.stopPropagation();//阻止了showDiv框的彈出

              }

             function showDiv(){

                            alert(div);

              }

             function showA(event){

                          event.stopPropagation();//阻止事件冒泡

                          event.preventDefault();//對a的鏈接不進行跳轉

             }

    </script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---------------------------------------------------------------------------