JavaScript target与currentTarget区别
1、DOM事件绑定到父元素
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>target 与 currentTarget</title>
</head> <body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var ul = document.getElementById('ul');
ul.onclick = function(e) {
console.log(this); //ul DOM节点
console.log(this === e.target); // click 事件真正的目标 false
console.log(this === e.currentTarget); //在事件处理程序内部，对象 this 始终等于 currentTarget 的值 返回ture
}
</script>
</body> </html>
2、DOM事件绑定到本身DOM上
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>target 与 currentTarget</title>
</head> <body>
<ul id="ul">
<li id="li">1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var li = document.getElementById('li');
li.onclick = function(e) {
console.log(this); //li DOM节点
console.log(this === e.target); // click 事件真正的目标 true
console.log(this === e.currentTarget); //在事件处理程序内部，对象 this 始终等于 currentTarget 的值 返回ture
}
</script>
</body> </html>
总结：
（1）事件内部的this就是绑定事件的那个DOM
（2）事件处理程序内部，对象 this 始终等于 currentTarget 的值。
（3）事件处理程序内部，target 的值是实际触发事件的真正DOM（如父节点绑定事件，其实子节点触发的事件）
更新2019.1.3
上面说的真晦涩！
示例代码：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>target 和 currentTarget 区别</title>
</head> <body>
<div id="app1">
<div id="app2">
<div id="app3">
test
</div>
</div>
</div>
<script type="text/javascript">
let app1 = document.getElementById('app1'),
app2 = document.getElementById('app2'),
app3 = document.getElementById('app3');
app1.addEventListener('click', e => {
console.log(e.target, 'e.target')
console.log(e.currentTarget, 'e.currentTarget')
})
</script>
</body> </html>
效果：
看明白了没？
这个的使用场景是：事件代理。
真正触发事件的dom是target
可以将事件代理到currentTarget上。
JavaScript target与currentTarget区别的更多相关文章
- 微信小程序中的target和currentTarget区别
最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...
- target与currentTarget区别 ( html是弹窗居中的例子)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- jS事件：target与currentTarget区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...
- 事件：target与currentTarget区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...
- target与currentTarget区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...
- JavaScript tips —— target与currentTarget的区别
定义 以下是红宝书的描述 属性/方法 类型 读/写 说明 currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素 target Element 只读 事件的目标 M ...
- js中的target与currentTarget的区别<转>
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- target和currentTarget的区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...
- 事件冒泡和事件捕获以及解释target和currenttarget的区别
冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...
随机推荐
- C++ MFC std::string转为 std::wstring
std::string转为 std::wstring std::wstring UTF8_To_UTF16(const std::string& source) { unsigned long ...
- C++ string append()添加文本
C++ string append()添加文本 1. C++ string append()添加文本 使用append()添加文本常用方法: 直接添加另一个完整的字符串: 如str1.append( ...
- win2008服务器asp站点配置要点
Win2008服务器重装系统后,运行ASP站点(使用Access数据库)报N多错误,经过一小时总算解决,总结如下: 在win2008服务器上1. 本站点应用程序池改为启用32位.2. 本站点启用父路径 ...
- 常用Mysql查询语句
1.查询数据表中重复记录 select user_name,count(*) as count from user_table group by user_name having count>1 ...
- 项目管理软件Readmine安装配置
1.安装依赖 #yum install curl-devel sqlite-devel libyaml-devel -y 2.安装rvm #curl -L https://get.rvm.io | b ...
- Python与数据库[1] -> 数据库接口/DB-API[3] -> ODBC 适配器
ODBC适配器 / ODBC Adaptor ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(WOSA,Windows Open Service ...
- Python的程序结构[8] -> 装饰器/Decorator -> 装饰器浅析
装饰器 / Decorator 目录 关于闭包 装饰器的本质 语法糖 装饰器传入参数 1 关于闭包 / About Closure 装饰器其本质是一个闭包函数,为此首先理解闭包的含义. 闭包(Clos ...
- linux-设置环境变量-export
Linux export命令用于设置或显示环境变量. 在shell中执行程序时,shell会提供一组环境变量.export可新增,修改或删除环境变量,供后续执行的程序使用.export的效力仅及于该次 ...
- Android开发之onCreate
最近看了一些开发人员做的APP开发,虽然都实现了比较完美的功能,不过很多地方很是牵强!我觉得:作为一个合格软件工程师,最重要的不是你写过多少代码,而是你研究过多少代码!所以,我更倡导多研究系统原本定制 ...
- 【视频】 Linux高级程序设计01.2开发平台及Linux环境限制
[课程笔记] Linux环境限制 遵循规范,使用现有资源,明确系统限制,增量开发. (1)规范问题 编码的规范,让程序更易读.Linux编码规范. “见着如意”:变量,函数命名等能够让人看到名称就知道 ...