事件冒泡和事件捕获以及解释target和currenttarget的区别
冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡。捕获是先触发父元素事件,再触发子元素事件。简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内
举例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#son{
width: 200px;
height: 200px;
background-color: yellow;
}
#father{
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
<script>
var father=document.getElementById("father");
var son=document.getElementById("son");
function outSide(){
console.log("我是父元素事件")
}
function inSide(){
console.log("我是子元素事件")
}
//测试冒泡 执行结果为先出现我是子元素,再出现我是父元素,证明元素执行的顺序是由内到外
// son.addEventListener("click",inSide,false);
// father.addEventListener("click",outSide,false);
// 测试捕获 执行结果是先出现我是父元素,再出现我是子元素,证明元素的执行顺序是由外到内
son.addEventListener("click",inSide,true);
father.addEventListener("click",outSide,true);
</script>
</html>
阻止事件冒泡:
function load(){
console.log('body')
}
function cli(e){
console.log('div');
if ( e && e.stopPropagation ){
e.stopPropagation();
}
else{
window.event.cancelBubble = true;
return false;
}
}
需要注意,在一些特殊事件中,本身就屏蔽了事件的冒泡
mouseout和mouseover 支持事件冒泡
mouseenter和mouseleave 则会自动阻止事件冒泡
target和currenttarget的区别 target指的是事件的真正触发者,currenttarget指的是事件的监听者,当不存在冒泡或者捕获的情况下,通常两者指向的对象为同一个,但是如果存在冒泡或者捕获,
就会指向各自所产生的对象
代码举例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#out{
width: 400px;
height:400px;
background-color:yellow;
}
#in{
width: 200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
<script>
var out=document.getElementById("out");
var inner=document.getElementById("in");
out.addEventListener("click",function(e){
console.log("我在外面");
console.log(e.target);
console.log(e.currentTarget);
},false);
inner.addEventListener("click",function(e){
console.log("冒泡了");
console.log(e.target);
console.log(e.currentTarget);
},false);
此时点击out元素时,因为不触发冒泡事件,所以e.target和e.currentTarget的输出结果均为id=out的div,也就是大盒子触发了监听事件。
但是当点击in元素的时候,测触发冒泡,此时in元素的 e.target和e.currentTarget相同(因为原本点击的就是In元素),但因为冒泡,其父元素out也会产生监听事件
而此时 out元素的 e.target 为 in 元素,因为确实点击的是 in元素(target指向真正的触发元素),而e.currentTarget输出则为out元素(产生监听的事件的元素)。
稍微自己总结了下,也不知道对不对:在通常情况下 e.target和e.currentTarget相同而在产生了冒泡或者捕获的元素中,非点击元素的 e.target和e.currentTarget不同.
事件冒泡和事件捕获以及解释target和currenttarget的区别的更多相关文章
- e.target与e.currentTarget的区别,事件冒泡与事件捕获 ,事件委托
e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- JavaScript中的事件冒泡?事件传播的解释
注:本文来源 可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
- JS事件(事件冒泡和事件捕获)
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- 彻底弄懂JS的事件冒泡和事件捕获
先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; ...
- 【JavaScript】事件捕获、事件冒泡与事件委托
2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...
- 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...
随机推荐
- Tomcat 启动项目报错 java.lang.OutOfMemoryError: Java heap space
近日使用myeclipse 部署web项目,启动tomcat时报错: SEVERE: Error waiting for multi-thread deployment of directories ...
- Javascript模块化规范
Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...
- bom和dom总结
BOM1.1 介绍 1.BOM是browser object model的缩写,简称浏览器对象模型 2.BOM提供了独立于内容而与浏览器窗口进行交互的对象 3.由于BOM主要用 ...
- eclipse 高亮代码
本文整合自网络上的两种靠谱的使eclipse代码高亮的方式. 其实你可以在Window->proferences->java->editor->syndex coloring- ...
- GestureDetectorl监听
package com.example.gesturedetectorinterface; /** * write by harvic * 2014-9-25 * blog.csdn.net/harv ...
- 用JS获取地址栏参数的方法(超级简单)
方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("( ...
- BPM业务流程管理与SAP如何更好集成整合?
深圳市有方科技有限公司是一家专注于M2M物联网无线通信产品和服务的国家级高新技术企业.有方科技专注于无线应用需求的挖掘和实现,拥有产品规划.工业设计.结构.硬件.软件.测试.ID.物流等完整的研发及设 ...
- Python笔记-集合,拷贝
对于列表,元组,集合的异同,有如下解释 #list ----> 允许重复的集合,修改# tuple ----> 允许重复的集合,不修改# set ----> 不允许重复的集合下面是示 ...
- Data Binding和INotifyPropertyChanged是如何协调工作的?
前言 WPF的一大基础就是Data Binding.在基于MVVM架构的基础上,只有通过实现INotifyPropertyChanged接口的ViewModel才能够用于Data Binding. 要 ...
- LRU Cache实现
最近在看Leveldb源码,里面用到LRU(Least Recently Used)缓存,所以自己动手来实现一下.LRU Cache通常实现方式为Hash Map + Double Linked Li ...