js的addEvertLIstener方法
简介
“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方法的更多相关文章
- TODO：Node.js pm2使用方法
TODO:Node.js pm2使用方法 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完 ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- 前端Js跨域方法汇总—剪不断，理还乱，是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS调用OC方法并传值，OC调用JS方法并传值////////////////////////zz
iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- C#中在AxWebBrowser控件注入JS脚本的方法
/// <summary> /// 窗体加载 /// </summary> private void JS_Load(object sender, EventArgs e) { ...
- [iOS Hybrid实践：UIWebView中Html中用JS调用OC方法，OC执行JS代码]
原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...
- js中apply方法的使用
js中apply方法的使用 1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...
随机推荐
- CTR预估中的贝叶斯平滑方法（二）参数估计和代码实现
1. 前言 前面博客介绍了CTR预估中的贝叶斯平滑方法的原理http://www.cnblogs.com/bentuwuying/p/6389222.html. 这篇博客主要是介绍如何对贝叶斯平滑的参 ...
- 一行code实现ADO.NET查询结果映射至实体对象。
AutoMapper是一个.NET的对象映射工具. 主要用途 领域对象与DTO之间的转换.数据库查询结果映射至实体对象. 这次我们说说 数据库查询结果映射至实体对象. 先贴一段代码: public S ...
- Java 中的接口有什么作用？好处？
接口的作用就是把使用接口的人和实现接口的人分开,实现接口的人不必要关心谁去使用,而使用接口的人也不用关心谁实现的接口,由接口将他们联系在一起. 很多JAVA初级程序员对于接口存在的意义很疑惑.不知道接 ...
- Linux安装redis及redis的php扩展。
------ redis安装,启动服务,开机启动,打开redis客户端 ------ yum install -y redis systemctl start redis systemctl enab ...
- Java多线程中的单例模式
一.在多线程环境下创建单例 方式一: package com.ietree.multithread.sync; public class Singletion { private static cla ...
- CF798 C. Mike and gcd problem
/* CF798 C. Mike and gcd problem http://codeforces.com/contest/798/problem/C 数论 贪心 题意:如果一个数列的gcd值大于1 ...
- 深入浅出node.js
http://www.infoq.com/cn/articles/what-is-nodejs/
- css浮动布局，浮动原理，清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- MarkDown本地图片上传工具制作总结
引言:开始尝试使用MarkDown语法写文档,发现图片必须用外链的形式才能插入到文章中,而自己平时最常用的插入图片方式就是QQ截屏,觉得很不方便所以制作的小工具辅助上传,因为时间和水平有限,其实代码写 ...
- PHP获取指定页面的指定内容
在刚入手PHP的时候,经理让我自己做一个文章的管理系统为了方便管理微信端发的消息.除了简单的添加分类.管理分类.添加文章.管理文章,还有一个功能就是要从微信文章网址中拿到网址上的标题.作者以及发表时间 ...