JavaScript事件属性event.target和currentTarget 属性的区别。
event.target 获取的是触发事件的标签元素
event.currentTarget 获取到的是发起事件的标签元素
一、事件属性:event.target
target事件委托的定义：本来该自己干的事，但是自己不干，交给别人来干
例子1
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {
width: 200px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("main").onclick = function(e) {
/*这里e等于window.event也可以写成event.*/
console.log(e.target); //<div id="main" class="sb js node"><span>我爱JavaScript</span></div>
console.log(e.target.id); //main 返回点击元素里存在的id属性值
console.log(e.target.tagName); //DIV
console.log(e.target.nodeName); //DIV
console.log(e.target.classList); //输出dom类列表,没有即空
console.log(e.target.className); // sb js node
console.log(e.target.innerHTML); //<span>我爱JavaScript</span>
console.log(e.target.innerText); //我爱JavaScript console.log("----------------------------------------------------") console.log(e.type); //获取事件类型：click
console.log(event.pageX+":"+event.pageY); //鼠标相对于文件的左侧和顶部边缘的位置
console.log(event.target); //获取发起事件的标签
console.log(event.currentTarget); //获取发起事件的标签
console.log(event.currentTarget.id); //获取发起事件的标签里的id属性值
console.log(event.which) //针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮 常用在keydown事件中
console.log(event.timeStamp); //事件触发与事件创建之间的时间间隔
alert("点击了id为："+event.target.id+"的"+event.target.nodeName+"标签"); // console.log(e.preventDefault()); //阻止默认事件
// console.log(e.stopPropagation()); //阻止事件冒泡到父元素
}
}
</script>
</head> <body>
<div id="main" class="js node"><span>我爱JavaScript</span></div>
</body> </html>
输出如下：
tip:给网页里ID为main的div标签绑定了一个鼠标点击事件，而在实际中，在点击了这个div内的所有子标签时，都会触发这个事件，这个过程就是“冒泡”
例子中的事件传播顺序：
- 在冒泡型事件流中，是span> div > body > html > document。
- 在捕获型事件流中，是document > html > body> div > span。
例子2：一个添加删除的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个增删demo</title>
</head>
<body>
<input type="text" id="text">
<input type="button" value="添加" id="button">
<ul>
<li>第1个<button class="btn" id="1">删除</button></li>
<li>第2个<button class="btn" id="2">删除</button></li>
<li>第3个<button class="btn" id="3">删除</button></li>
</ul>
<script>
var button = document.getElementById("button");
var text = document.getElementById("text");
var ul = document.getElementsByTagName("ul")[0];
var btnClass = document.getElementsByClassName("btn");
button.onclick = function(){
var deleteButton = document.createElement("button");
var value = text.value;
deleteButton.setAttribute("class","btn");
var deleteText = document.createTextNode("删除");
deleteButton.appendChild(deleteText);
var li = document.createElement("li");
var liText = document.createTextNode(value);
li.appendChild(liText);
li.appendChild(deleteButton);
ul.appendChild(li);
for(var i=0;i<btnClass.length;i++){
btnClass[i].onclick=function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
} for(var i=0;i<btnClass.length;i++){
btnClass[i].onclick=function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
</script>
</body>
</html>
效果如下：
二、currentTarget
event.currentTarget的作用是什么呢，我觉得他和this 的作用是差不多的，始终返回的是绑定事件的元素
例子1
<body>
<ul id="ul">ul
<li>li<a href="">a</a></li>
<li>li<a href="">a</a></li>
<li>li<a href="">a</a></li>
</ul>
<script>
var ul = document.getElementById("ul");
ul.onclick = function(event){
var tar = event.target;
var current = event.currentTarget; //使用target感觉也没有太大区别，具体鉴定需要多去尝试不同的demo
var tagName = tar.nodeName.toLowerCase();
console.log(tar == this);
event.preventDefault();
}
</script>
</body>
效果
资料参考：https://www.cnblogs.com/sxz2008/p/6393232.html
JavaScript事件属性event.target和currentTarget 属性的区别。的更多相关文章
- AS3中 Event 类的target和currentTarget属性
在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
厉害了我的哥--你是如此简单我却将你给遗忘 放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...
- jquery事件之event.target用法详解
1. 定义和用法: 显示哪个 DOM 元素触发了事件: $("p, button, h1, h2").click(function(event){ $("div" ...
- javascript 事件委托 event delegation
事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件 ...
- JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍
event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...
- JavaScript事件循环(Event Loop)机制
JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...
随机推荐
- Integer和Integer常量池
Integer中有个静态内部类 IntegerCache ,里面有个cache[],也就是Integer常量池 大小为一个字节(-128-127). (jdk1.8.0_101)源码 private ...
- 【Offer】[32] 【从上到下打印二叉树】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 不换行:从上到下打印出二叉树的每个节点,同层的节点按照从左到右的顺序打印.例如,输入下图的二叉树,则依次打印出8,6,10,5,7,9, ...
- 【Offer】[9] 【用两个栈实现队列】
题目描述 思路分析 Java代码 代码链接 题目描述 用两个栈实现队列 思路分析 栈--> 先进后出 队列--> 先进先出 进队列操作,选择栈s1进栈,关键在与实现出队列操作,要考虑到队列 ...
- get和post请求方式的区别
1.用途方面: get是向服务器请求数据,post是向服务器发送数据. 2.大小方面: get发送数据上有大小限制,post理想上无大小限制,实际上有限制. 3.安全方面: get请求的数据会显示在地 ...
- android 解决 多品牌手机拍照问题,尤其是小米手机
先上个图吧 .点击头像弹出下面对话框,然后直接上代码. 头像是自定义控件实现的圆形头像,当然就目前而言 想要实现 圆形头像的资料太多了,随便找个就行 <com.kuibu.jucai.widge ...
- bluetooth(蓝牙) AVRCP协议概念及代码流程解析
一 概念 AVRCP全称:The Audio/Video Remote Control Profile (AVRCP) 翻译成中文就是:音视频远程控制协议.概念:AVRCP定义了蓝牙设备之间的音视频传 ...
- ActiveMQ的安装与使用。
1.什么是ActiveMQ ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE .4规范的 JMS Provider实现,尽 ...
- SqlServer Left、Right、CharIndex函数
LEFT 函数:返回字符串中从左边开始指定个数字符 RIGT.H 函数:返回字符串从右边开始指定个数字符 len函数:LEN 函数返回文本字段中值的长度. CHARINDEX函数:CHARINDEX ...
- （七十三）c#Winform自定义控件-资源加载窗体
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- Python人工智能第一篇：语音合成和语音识别
Python人工智能第一篇:语音合成和语音识别 此篇是人工智能应用的重点,只用现成的技术不做底层算法,也是让初级程序员快速进入人工智能行业的捷径.目前市面上主流的AI技术提供公司有很多,比如百度, ...