zoukankan      html  css  js  c++  java
  • event事件对象

    1.DOM2级事件规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段

    2.在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域,在DOM0级方法事件处理程序会在其所属元素的作用域内运行,在使用attachEvent()方法。事件处理程序会在全局作用域中运行,因此this等于window。

    3.event对象的属性与方法 hubbles 表示事件是否冒泡 cancelable 表示是否可以取消事件的默认行为 currentTarget 其事件处理程序当前正在处理事件的那个元素  defaultPrevented 为true 表示已经调用了preventDefault(); detail:与事件相关的细节信息   eventPhase:调用事件处理程序阶段:1表示捕获阶段,2表示处于目标 3表示冒泡阶段 preventDefault() : 取消事件的默认行为。如果cancelable是true表示可以使用这个方法。 stopImmediatePropagation() :取消事件进一步捕获或冒泡,同时阻止任何事件处理程序被调用; stopPropagation()取消事件进一步捕获冒泡,如果bubble是true可以使用这个方法。 target:事件目标 trusted:为true表示事件是浏览器生成的。为false表示事件是由开发人员通过Javascript创建的 type:被触发的事件类型  view:与事件关联的抽象试图 。等同于发生事件的window对象。在需要通过一个函数处理多个事件时 可以使用type属性 代码如下

     <body>
    <form id="myBtn" >
    <input type="button"  value="我的值" />
    </form>
    </body>
    <script>
       var btn = document.getElementById("myBtn");
       //IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
       var handler = function(event){
          var event = event || window.event;
          var obj = event.srcElement ? event.srcElement : event.target;
          switch (event.type) {
             case "click":  
                 alert("Clicked");
                 break;
             case "mouseover":
                 obj.style.backgroundColor = "red";
                 break;
             case "mouseout":
                 obj.style.backgroundColor = "orange";
                 break;
          }
       };
       btn.onclick = handler;
       btn.onmouseover = handler;
       btn.onmouseout = handler;
    </script>

    stopPropagation()的用法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡 例子如下

    <body>
    <form id="myBtn" >
    <input type="button"  value="我的值" />
    </form>
    </body>
    <script>
       var btn = document.getElementById("myBtn");
       btn.onclick = function(event){
          alert("Clciked");
          event.stopPropagation();//有了这句话会取消进一步的事件捕获和冒泡
       };
       
       document.body.onclick = function(event){
          alert("body clicked");
       };
    </script>

    4.IE的event对象包含的属性和方法  :cancelBubble:默认值为false,但将其设置为true就可以取消事件冒泡(与DOM中的stopPropagation()方法的作用相同) returnValue 默认值为true ,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同) srcElement :事件目标(与DOM中的target属性相同) type :被触发的事件类型。

  • 相关阅读:
    一致性哈希算法
    Tcp 3次握手 4次挥手
    计算机字符编码编年史
    虚拟机字节码指令表 JVM
    计算机是如何计算的、运行时栈帧分析(神奇i++续)
    神奇的i++
    记一次 springboot 参数解析 bug调试 HandlerMethodArgumentResolver
    String+、intern()、字符串常量池
    签名和加密的区别(详细)
    java之设计模式汇总
  • 原文地址:https://www.cnblogs.com/luhangnote/p/2642063.html
Copyright © 2011-2022 走看看