• 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 :被触发的事件类型。

  • 相关阅读:
    webpack devServer配置项的坑
    app混合开发 fastlick.js 在ios上 input标签点击 不灵敏 处理
    vue 学习八 自定义指令
    Verilog数值大小比较
    Verilog实现Matlab的fliplr函数
    基本不等式
    如何读取ila数据
    Xilinx FPGA时钟IP核注意事项
    FPGA Turbo译码器注意事项
    EbN0转SNR
  • 原文地址:https://www.cnblogs.com/luhangnote/p/2642063.html
Copyright © 2020-2023  润新知