js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是
addEventListener("click",function(){},true);
很容易理解,第一个参数是事件类型,比如点击(click)、触摸(touchstart),
第二个参数就是事件函数,
比如我给一个button添加alert函数。
window.onload=function(){
document.getElementById("hello").addEventListener("onkeydown",function () {
alert("hello");
});
}
那么第三个参数是什么呢?这个参数设计到事件的捕获与冒泡,为true时捕获,false时冒泡。
什么意思呢?
我举个简单的例子,我有两个div和一个button,button在div2里面,div2在div1里面。如下图所示
给button、div1、div2、都添加了click事件,分别alert button、div1、div2。
window.onload=function(){
document.getElementById("btn").addEventListener("click",function () {
// body...
alert("hello");
});
document.getElementById("div1").addEventListener("click",function(){
alert("div1");
});
document.getElementById("div2").addEventListener("click",function(){
alert("div2");
});
}
那么问题就来了,我点击button,也相当于点击了div1和div2,那么,谁先出现呢?
直观的讲,谁在上面,谁在下面。
所以,在js中就分为了两个处理方法,冒泡和捕获。
冒泡:从里面往外面触发事件,就是alert的顺序是 button、div2、div1。
捕获:从外面往里面触发事件,就是alert的顺序是div1、div2、button。
要想冒泡,就要将每个监听事件的第三个参数设置为false,也就是默认的值。
要想捕获,就要将每个监听事件的第三个参数设置为true。
好了,就讲这么多了。为了更好的理解冒泡和捕获,大家可以给三个事件的第三个参数随便设置,就是说不同时设置为true或false,
给button为true,div1为false等等,根据结果就能更好的理解这两个概念了。
js中addEventListener第三个参数涉及到的事件捕获与冒泡的更多相关文章
- js中confirm揭示三个按钮“是”“否”“取消”
js中confirm提示三个按钮“是”“否”“取消” 重载DOM中confirm window.confirm = function(str) { str=str.replace(/\'/g, & ...
- addEventListener 的三个参数
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- js中addEventListener中第3个参数
addEventListener中的第三个参 数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). <div id=& ...
- js中 addEventListener 和removeEventListener
js中添加事件监听本来是非常常见的事情,但是去除监听一般很少去干,最近项目中需要监听页面显示或者隐藏 代码如下 document.addEventListener(visibilitychange', ...
- Android中自定义样式与View的构造函数中的第三个参数defStyle的意义
零.序 一.自定义Style 二.在XML中为属性声明属性值 1. 在layout中定义属性 2. 设置Style 3. 通过Theme指定 三.在运行时获取属性值 1. View的第三个构造函数的第 ...
- JavaScript addEventListener 第三个参数
先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- addEventListener 第三个参数
addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(typ ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- Node.js中的express框架获取参数
express获取参数有三种方法: req.query 适合 http://localhost:3000/form?num=8888 req.body 适合http://localhost:30 ...
随机推荐
- FastDFS分布文件系统相关资料索引
FastDFS是为互联网应用量身定做的一套分布式文件存储系统,非常适合用来存储用户图片.视频.文档等文件.对于互联网应用,和其他分布式文件系统相比,优势非常明显.具体情况大家可以看相关的介绍文档,包括 ...
- nfs服务端配置文件详解
配置参数语法 配置文件路径 /etc/exports 可以使用#进行注释说明 一个完整的配置实例至少需要3个参数 1.被共享的目录 必须是存在的目录 2.向谁共享 可以指定主机或网络范围,支持通配符* ...
- Unity3D Layer要点
简介 Layer可以用于光照的分层和物理碰撞的分层,这样可以很好地进行性能优化 数据结构 Layer在Unity中有3中呈现方式:1.string名字,2.int层索引 ...
- IOS开发创建开发证书及发布App应用(一)——流程说明
之前在自己做的博客网站上面发布了这个系列的文章,当时还是不错的,帮助了很多跟我一样的新手朋友,不过由于服务器出现问题,丢失了一年了,现在终于找到了,所以发到博客园给大家共享一下,也是为我自己做个参考 ...
- PBXCp Error
在项目开发中遇到了报PBXcp Error错误 然后我用快捷键清理了下项目中的缓存,直接错误警告消除 多次清理缓存,我编译时用的Xcode 8.1 问题是资源文件中的nib文件找不到,有时能找到 ,有 ...
- 【转】JSON和JSONP
前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...
- 【转】flash air中读取本地文件的三种方法
actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) var stream:FileStre ...
- POPTEST老李分享session,cookie的安全性以及区别 1
POPTEST老李分享session,cookie的安全性以及区别 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程 ...
- 如何使用CocoaPods
如何使用CocoaPods 1.进入主目录下 cd /Users/HYYT/Desktop/支付功能/微信支付宝集成/支付宝微信支付集成 2.建立Podfile(配置文件) 2.1 输入:vim P ...
- SQL编程的一些良好好习惯
|转载自:cnblog |原文链接:http://www.cnblogs.com/MR_ke/archive/2011/05/29/2062085.html 我们做软件开发的,大部分人都离不开跟数据库 ...