简介

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。

public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void

他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后一个布尔值参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序。

使用

1.事件添加

addEventListener 可以在一个元素上多次添加事件。

var oDiv = document.getElementById("div1");

oDiv.addEventListener("click",

function() {

    alert(this.id);

},

false);

oDiv.addEventListener("click",

function() {

    alert("clicked me");

},

false);

点击oDiv节点后，先输出节点id“div1”，再输出“clicked me”。

2.事件移除

addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法移除。

var oDiv = document.getElementById("div1");

oDiv.addEventListener("click",

function() {

    alert(this.id);

},

false);

oDiv.removeEventListener("click",

function() {

    alert(this.id);

},

false); // 无效

虽然 removeEventListener() 看似使用了相同的参数，但是实际上传入的那个是另一个完全不同的函数。所以如果想正确的移除事件，写法如下所示。

var oDiv = document.getElementById("div1");

var handler = function() {

    alert(this.id);

}

oDiv.addEventListener("click", handler, false);

oDiv.removeEventListener("click", handler, false); // 有效

讨论

这里我们主要讨论 useCapture 参数的用法。首先看一段代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <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>

    <script type="text/javascript">

        var oDiv1 = document.getElementById('div1'),

            oDiv2 = document.getElementById('div2'),

            oDiv3 = document.getElementById('div3');

        oDiv1.addEventListener('click', showBlue, true);

        oDiv2.addEventListener('click', showRed, false);

        oDiv3.addEventListener('click', showYellow, true);

        function showBlue(){ //蓝

            alert("blue");

        }

        function showRed(){ //红

            alert("red");

        }

        function showYellow(){//黄

            alert("yellow");

        }

    </script>

</body>

</html>

点击div3之后，过程分为三个阶段：

捕获阶段: 外-->里 在div1处检测useCapture属性为true，即事件捕获阶段会触发事件，所以会执行程序，输出“blue”。在div2处检测useCapture属性为false，即事件冒泡阶段才会触发，所以不会执行程序。
目标阶段: 目标到div3处，发现div3就是鼠标点击的节点， 所以这里是目标阶段。若有事件处理程序，则执行该程序，输出“yellow”。这里不论 useCapture 为 true 还是 false。
冒泡阶段: 里-->外 在div2处检测useCapture属性为false，即事件冒泡阶段才会触发，所以会执行程序，输出“red”。在div1处检测useCapture属性为true，即事件捕获阶段会触发事件，所以不会执行程序。

程序的运行结果为：“blue”，“yellow”，“red”。

对于addEventListener方法可以对一个dom添加多个事件，而通过jquery的事件绑定只能添加一个方法，如果添加多个的话前面的时间会被后面的时间覆盖。

js的addEvertLIstener方法的更多相关文章

  1. TODO：Node.js pm2使用方法

    TODO:Node.js pm2使用方法 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完 ...

  2. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  3. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  4. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  5. JS调用OC方法并传值，OC调用JS方法并传值////////////////////////zz

     iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...

  6. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  7. C#中在AxWebBrowser控件注入JS脚本的方法

    /// <summary> /// 窗体加载 /// </summary> private void JS_Load(object sender, EventArgs e) { ...

  8. [iOS Hybrid实践：UIWebView中Html中用JS调用OC方法，OC执行JS代码]

    原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...

  9. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

随机推荐

  1. weex里Vuex state使用storage持久化

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: stora ...

  2. 使用Python-iGraph绘制贴吧/微博好友关系图

    想通过图形化的方式显示社交网络特定用户的好友关系,上网找了一下这方面的图形库有networkx.graphviz等,找了好久我选择了iGraph这个图形库. igraph在Windows下的安装稍微有 ...

  3. oracle表空间扩容

    oracle在使用中会发现,表空间不足的情况:以下介绍了如何1.查询表空间使用率.剩余量:2.如何扩展表空间容量: 1.表空间容量指标查询 SELECT TABLESPACE_NAME "表 ...

  4. Nodejs核心模块

    (1)全局对象 在浏览器JS中,通常window是全局对象,而nodejs中的全局对象是global,所有全局变量都是global对象的属性. 在nodejs中能够直接访问到的对象通常都是global ...

  5. Unity3D 正六边形，环状扩散，紧密分布，的程序

    最近在做一个正六边形的游戏,被一开始的布局难倒了. 需求:中心有个正六边形,输入围绕中心扩散的环数,自动创建和摆放. 大概就是这样的吧,我觉得这个非常轻松的就可以搞定了.啊~~~~~啊~~~ 五环~~ ...

  6. Eclipse 安装反编译插件

    前言:在实际的开发中几乎都会使用到一些框架来辅助项目的开发工作,对于一些框架的代码我们总怀有一些好奇之心,想一探究竟,有源码当然更好了,对于有些JAR包中的代码我们就需要利用反编译工具来看一下了,下面 ...

  7. ue4竖排文本显示

    最近发现中国风游戏中,经常会遇到旁白文字竖着显示的需求. 于是我首先找了找控件蓝图中的text有没有相关类似横竖文本框的选项,然而并无所获. 突然间灵机一动! 竖着显示不就是每个字一换行嘛! 说干就干 ...

  8. xmlplus 组件设计系列之六 - 下拉刷新

    "下拉刷新"由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中.2010年4月,Twitter 收购 Tweetie 开发商 ...

  9. 探讨数据进行AES加密和解密以及.NET Core对加密和解密为我们提供了什么？

    前言 对于数据加密和解密每次我都是从网上拷贝一份,无需有太多了解,由于在.net core中对加密和解密目前全部是统一了接口,只是做具体的实现,由于遇到过问题,所以将打算基本了解下其原理,知其然足矣, ...

  10. [Git]07 如何在提交过程中忽略某些文件

     一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表.通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等.我们可以创建一个名为 .gitignor ...