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>

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

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

javascript之事件详解2

标签：

原文地址：http://www.cnblogs.com/yanyuanyuan/p/5718825.html