zoukankan      html  css  js  c++  java
  • 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>

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

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

  • 相关阅读:
    Intellij 常用技巧-持续更新
    Android界面组件的四种启动方式
    Preference Screen 首选项
    Oracle OCI-22053:溢出错误
    SQLPLUS使用
    Oracle中数字格式的文本化处理
    MP4V2 移植 (基于imx6 平台)
    IMX6Q camera 应用编程之 摄像头裁剪
    IMX6Q camera驱动分析 (4)
    IMX6Q Camera驱动分析 (3)
  • 原文地址:https://www.cnblogs.com/yanyuanyuan/p/5718825.html
Copyright © 2011-2022 走看看