• 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>

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

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

  • 相关阅读:
    Dungeon Master (广搜)
    棋盘游戏,dfs搜索
    水管工游戏——dfs
    URL的井号
    模态与非模态对话框
    网站建设之空连接标准
    CSS浮动(float,clear)通俗讲解
    CSS从大图中抠取小图完整教程(background-position应用)
    URI(标识某一互联网资源的字符串)
    CDN
  • 原文地址:https://www.cnblogs.com/yanyuanyuan/p/5718825.html
Copyright © 2020-2023  润新知