Dom addEventlistener与id 绑定事件的区别(续)
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 绑定事件的区别(续)的更多相关文章
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
- JS---DOM---总结绑定事件的区别
总结绑定事件的区别: addEventListener(); attachEvent() 相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventListen ...
- IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...
- 每日分享!~ JavaScript中面试基础--1,数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别~
javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...
- DOM初体验(绑定事件,监听事件)
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
- jquery绑定事件的区别
query中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function( ...
- jquery 相同ID 绑定事件
本文链接:https://blog.csdn.net/lan_13217/article/details/84079441 http://hi.baidu.com/meneye/blog/item/1 ...
- jquery appaend元素中id绑定事件失效问题
1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...
随机推荐
- iOS可视化动态绘制连通图
上篇博客<iOS可视化动态绘制八种排序过程>可视化了一下一些排序的过程,本篇博客就来聊聊图的东西.在之前的博客中详细的讲过图的相关内容,比如<图的物理存储结构与深搜.广搜>.当 ...
- hadoop 2.7.3本地环境运行官方wordcount
hadoop 2.7.3本地环境运行官方wordcount 基本环境: 系统:win7 虚机环境:virtualBox 虚机:centos 7 hadoop版本:2.7.3 本次先以独立模式(本地模式 ...
- $.type 怎么精确判断对象类型的 --(源码学习2)
目标: var a = [1,2,3]; console.log(typeof a); //->object console.log($.type(a)); //->ar ...
- PHP赋值运算
1. 赋值运算:= ,意思是右边表达式的值赋给左边的运算数. $int1=10; $int1=$int1-6; //$int1=4 echo $int1,"<br>"; ...
- Android数据加密之SHA安全散列算法
前言: 对于SHA安全散列算法,以前没怎么使用过,仅仅是停留在听说过的阶段,今天在看图片缓存框架Glide源码时发现其缓存的Key采用的不是MD5加密算法,而是SHA-256加密算法,这才勾起了我的好 ...
- DDD 领域驱动设计-商品建模之路
最近在做电商业务中,有关商品业务改版的一些东西,后端的架构设计采用现在很流行的微服务,有关微服务的简单概念: 微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独 ...
- ls: 无法访问/usr/sbin/smartctl: 没有那个文件或目录
环境:RHEL6.5 + Oracle 11.2.0.4 RAC 在安装RAC时,检查时缺少包 cvuqdisk-1.0.9-1,oracle提供脚本修复安装. 但在执行时报错: [root@orad ...
- 那些年【深入.NET平台和C#编程】
一.深入.NET框架 1..NET框架具有两个组件:CLR(公共语言运行时)和FCL(框架类库),CLR是.NET框架的基础 2.框架核心类库: System.Collections.Generic: ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- 【转】 FineBI:自助式BI工具打造业务分析的“快与准”
如今的企业经营方式,业务对于数据分析有极大的需求,但却苦于没有数据以及工具的有效支持,业务分析仍就依赖于IT报表制作.而IT方不断地按业务需求去调研.确认业务逻辑,然后取数做报表,其中还要忍受业务的需 ...