zoukankan      html  css  js  c++  java
  • Dom addEventlistener与id 绑定事件的区别(续)

    addEventListener 第三个参数为 useCapture.

    以一个例子说明。

    <div id="div1" style="background: blue; 100px; height: 100px;">
            <div id="div2" style="background: red; 70px; height: 70px;">
                <div id="div3" style="background: yellow; 50px; height: 50px;"></div>
            </div>
        </div>
    
    var oDvi1 = document.getElementById('div1'),
        oDvi2 = document.getElementById('div2'),
        oDvi3 = document.getElementById('div3');
    
    
    // 123 -> 456 -> 345
    oDvi1.addEventListener('click', xx1, true);
    oDvi2.addEventListener('click', xx2, false);
    oDvi3.addEventListener('click', xx3, true);
    
    
    function xx1(){ //
        alert(123);
    }
    
    function xx2(){ //
        alert(345);
    }
    
    function xx3(){//
        alert(456);
    }

    捕获阶段: 外-->里 * 在div1处检测 useCapture 是否为true,是则执行程序, div2同理 .

    目标阶段: 目标到div3处,发现div3就是鼠标点击的节点, 所以这里是目标阶段。若有事件处理程序,则执行该程序,这里不论 useCapture 为 true 还是 false。

    冒泡阶段: 里-->外  在div2处检测useCapture 是否为false, 是则执行该程序 . div1同理 

    //----------------①----------------//

    true 的触发顺序总是在 false 之前;
    如果多个均为 true,则外层的触发先于内层;
    如果多个均为 false,则内层的触发先于外层。

    //----------------②---------------//

    1.使用 EventDispatcher 对象注册事件侦听器对象,以使侦听器能够接收事件通知。 可以为特定类型的事件、阶段和优先级在显示列表的所有节点上注册事件侦听器。 
    成功注册一个事件侦听器后,无法通过额外调用 addEventListener() 来更改其优先级。 要更改侦听器的优先级,必须首先调用 removeListener()。 然后,可以使用新的优先级再次注册该侦听器。

    注意:注册该侦听器后,如果继续调用具有不同 type 或 useCapture 值的 addEventListener(),则会创建单独的侦听器注册。 例如,如果首先注册 useCapture 设置为 true 的侦听器,则该侦听器只在捕获阶段进行侦听。 如果使用同一个侦听器对象再次调用 addEventListener(),并将 useCapture 设置为 false,那么便会拥有两个单独的侦听器:一个在捕获阶段进行侦听,另一个在目标和冒泡阶段进行侦听。

    2.不能只为目标阶段或冒泡阶段注册事件侦听器。 这些阶段在注册期间是成对出现的,因为冒泡阶段只适用于目标节点的始祖。如果不再需要某个事件侦听器,可调用 removeEventListener() 删除它,否则会产生内存问题。 由于垃圾回收器不会删除仍包含引用的对象,因此不会从内存中自动删除使用已注册事件侦听器的对象。

    3.复制 EventDispatcher 实例时并不复制其中附加的事件侦听器。 (如果新近创建的节点需要一个事件侦听器,必须在创建该节点后附加该侦听器)。 但是,如果移动 EventDispatcher 实例,则其中附加的事件侦听器也会随之移动。

    4.如果在正在处理事件的节点上注册事件侦听器,则不会在当前阶段触发事件侦听器,但会在事件流的稍后阶段触发,如冒泡阶段。

       如果从正在处理事件的节点中删除事件侦听器,则该事件侦听器仍由当前操作触发。 删除事件侦听器后,决不会再次调用该事件侦听器(除非再次注册以备将来处理)。

       参数 type:String — 事件的类型。

       listener:Function — 处理事件的侦听器函数。 此函数必须接受 Event 对象作为其唯一的参数,并且不能返回任何结果,如以下示例所示: 
       function(evt:Event):void

       函数可以有任何名称。


    5.useCapture:Boolean (default = false) — 确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果 useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将 useCapture 设置为 false。priority:int (default = 0) — 事件侦听器的优先级。 优先级由一个带符号的 32 位整数指定。 数字越大,优先级越高。 优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。 如果两个或更多个侦听器共享相同的优先级,则按照它们的添加顺序进行处理。 默认优先级为 0。

    6.useWeakReference:Boolean (default = false) — 确定对侦听器的引用是强引用,还是弱引用。 强引用(默认值)可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。 
    类级别成员函数不属于垃圾回收的对象,因此可以对类级别成员函数将 useWeakReference 设置为 true 而不会使它们受垃圾回收的影响。 如果对作为嵌套内部函数的侦听器将 useWeakReference 设置为 true,则该函数将被作为垃圾回收并且不再是永久函数。 如果创建对该内部函数的引用(将该函数保存到另一个变量中),则该函数将不作为垃圾回收并仍将保持永久。

  • 相关阅读:
    内部类概述和访问特点
    权限修饰符 权限
    抽象类和接口作为返回值类型的问题
    抽象类和接口作为形参问题
    jdbc:java数据库连接
    类与类、类与接口、接口与接口的关系
    接口
    抽象类
    多态
    继承中构造方法的关系
  • 原文地址:https://www.cnblogs.com/zqzjs/p/4458291.html
Copyright © 2011-2022 走看看