首页 > 编程语言 > 详细

javascript之事件详解2

时间:2016-07-29 16:32:48      阅读:228      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!