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>

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

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

  • 相关阅读:
    Coursera Algorithms week3 快速排序 练习测验: Nuts and bolts
    快速排序及三向切分快排——java实现
    自顶向下(递归)的归并排序和自底向上(循环)的归并排序——java实现
    希尔shell排序——java实现
    插入排序——java实现
    选择排序——java实现
    Coursera Algorithms week3 归并排序 练习测验: Shuffling a linked list
    单向链表的归并排序——java实现
    Coursera Algorithms week3 归并排序 练习测验: Counting inversions
    Coursera Algorithms week2 栈和队列 练习测验: Stack with max
  • 原文地址:https://www.cnblogs.com/yanyuanyuan/p/5718825.html
Copyright © 2011-2022 走看看