addEventListener 第三个参数为 useCapture.

以一个例子说明。

<div id="div1" style="background: blue;width: 100px; height: 100px;">
<div id="div2" style="background: red;width: 70px; height: 70px;">
<div id="div3" style="background: yellow;width: 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,则该函数将被作为垃圾回收并且不再是永久函数。 如果创建对该内部函数的引用(将该函数保存到另一个变量中),则该函数将不作为垃圾回收并仍将保持永久。

Dom addEventlistener与id 绑定事件的区别(续)的更多相关文章

  1. dom addeventlistener与id 绑定事件的区别

    文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...

  2. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  3. JS---DOM---总结绑定事件的区别

    总结绑定事件的区别: addEventListener(); attachEvent()   相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventListen ...

  4. IE和DOM事件流、普通事件和绑定事件的区别

    IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...

  5. 每日分享!~ JavaScript中面试基础--1,数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别~

    javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...

  6. DOM初体验(绑定事件,监听事件)

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

  7. jquery绑定事件的区别

    query中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function( ...

  8. jquery 相同ID 绑定事件

    本文链接:https://blog.csdn.net/lan_13217/article/details/84079441 http://hi.baidu.com/meneye/blog/item/1 ...

  9. jquery appaend元素中id绑定事件失效问题

    1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...

随机推荐

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. Java多线程

    一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程.   进程:进程 ...

  3. socket读写返回值的处理

    在调用socket读写函数read(),write()时,都会有返回值.如果没有正确处理返回值,就可能引入一些问题 总结了以下几点 1当read()或者write()函数返回值大于0时,表示实际从缓冲 ...

  4. C++ 应用程序性能优化

    C++ 应用程序性能优化 eryar@163.com 1. Introduction 对于几何造型内核OpenCASCADE,由于会涉及到大量的数值算法,如矩阵相关计算,微积分,Newton迭代法解方 ...

  5. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  6. Take into Action!

    很久没有认真地写文字了. 刚毕业一两年断断续续在csdn上写过一些当时的工作记录,然后没有坚持下去.有时候是觉得自己不牛,记录的东西旁人看起来也许不值一提:有时候觉得结婚生娃了,然后时间不够用(确实是 ...

  7. Kotlin与Android SDK 集成(KAD 05)

    作者:Antonio Leiva 时间:Dec 19, 2016 原文链接:https://antonioleiva.com/kotlin-integrations-android-sdk/ 使用Ko ...

  8. hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的用法

    javascript中有原型这么一个概念,任何一个构造函数都有它对应的原型(prototype),我们可以给这个原型赋予一些我们想要的属性,像下面这样: function Gadget(name, c ...

  9. NodeJs 开发微信公众号(三)微信事件交互

    微信公众号有个规则,一旦开启了开发者模式,其他的常规功能就都必须通过接口调用完成.比如说自定义菜单功能,必须通过发送post请求的方式生成.本章就通过关注到取消关注的整个过程来谈一谈nodejs是怎么 ...

  10. 页面与ViewModel(上)

    在UWP淘宝与旺信中,笔者主要负责页面与控件的制作,这些工作看似简单,但要想做的全面细致仍然需要深入的思考.本文想分享一些在UWP旺信的制作过程中,笔者在UI页面与控件制作上体会到的一些心得.可能笔者 ...