target和currentTarget
event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素
1 <ul id="ul">ul2 <li>li<a href="">a</a></li>3 <li>li<a href="">a</a></li>4 <li>li<a href="">a</a></li>5 </ul>6 <script>7 var ul = document.getElementById("ul");8 ul.onclick = function(event){9 var tar = event.target; 10 var tagName = tar.nodeName.toLowerCase(); 11 console.log("你点击了:"+tagName); 12 event.preventDefault(); 13 } 14 </script>
当我点击哪个元素时,event.target返回的是点击的元素节点,我们可以用返回的节点使用一些DOM对象上的一些操作。这里event.preventDefault,是用来阻止点击a默认跳转,刷新页面导致结果不能输出来的一个作用。
event.currentTarget的作用是什么呢,我觉得他和this 的作用是差不多的,始终返回的是绑定事件的元素
1 <ul id="ul">ul2 <li>li<a href="">a</a></li>3 <li>li<a href="">a</a></li>4 <li>li<a href="">a</a></li>5 </ul>6 <script>7 var ul = document.getElementById("ul");8 ul.onclick = function(event){9 var tar = event.target; 10 var current = event.currentTarget; 11 var tagName = tar.nodeName.toLowerCase(); 12 console.log(tar == this); 13 event.preventDefault(); 14 } 15 </script>
实际使用中target的妙用:
target事件委托的定义:本来该自己干的事,但是自己不干,交给别人来干。比如上面的例子中,应该是ul li a 来监控自身的点击事件,但是li a自己不监控这个点击事件了,全部交给li父节点和a祖父节点ul来监控自己的点击事件。一般用到for循环遍历节点添加事件的时候都可以用事件委托来做,可以提高性能。
来个案例:一个添加删除的demo。
1 <input type="text" id="text">2 <input type="button" value="添加" id="button">3 <ul>4 <li>第1个<button class="btn" id="1">删除</button></li>5 <li>第2个<button class="btn" id="2">删除</button></li>6 <li>第3个<button class="btn" id="3">删除</button></li>7 </ul>8 <script>9 var button = document.getElementById("button"); 10 var text = document.getElementById("text"); 11 var ul = document.getElementsByTagName("ul")[0]; 12 var btnClass = document.getElementsByClassName("btn"); 13 button.onclick = function(){ 14 var deleteButton = document.createElement("button"); 15 var value = text.value; 16 deleteButton.setAttribute("class","btn"); 17 var deleteText = document.createTextNode("删除"); 18 deleteButton.appendChild(deleteText); 19 var li = document.createElement("li"); 20 var liText = document.createTextNode(value); 21 li.appendChild(liText); 22 li.appendChild(deleteButton); 23 ul.appendChild(li); 24 for(var i=0;i<btnClass.length;i++){ 25 btnClass[i].οnclick=function(){ 26 this.parentNode.parentNode.removeChild(this.parentNode); 27 } 28 } 29 } 30 31 for(var i=0;i<btnClass.length;i++){ 32 btnClass[i].οnclick=function(){ 3334 this.parentNode.parentNode.removeChild(this.parentNode); 35 } 36 } 37 </script>
为什么在第24行也需要一个for循环,给每个删除按钮添加事件呢,因为外面的for循环,在文档刷新时给页面中存在的三个删除按钮添加了点击事件,而后来添加的删除按钮并没有绑定事件,导致页面中存在的三个li标签可以删除,而后来新添加的li不能删除这个问题。我们使用事件委托来做就不用这么麻烦了
1 <script>2 var button = document.getElementById("button");3 var text = document.getElementById("text");4 var ul = document.getElementsByTagName("ul")[0];5 var btnClass = document.getElementsByClassName("btn"); 6 button.onclick = function(){7 var deleteButton = document.createElement("button"); 8 var value = text.value;9 deleteButton.setAttribute("class","btn"); 10 var deleteText = document.createTextNode("删除"); 11 deleteButton.appendChild(deleteText); 12 var li = document.createElement("li"); 13 var liText = document.createTextNode(value); 14 li.appendChild(liText); 15 li.appendChild(deleteButton); 16 ul.appendChild(li); 17 } 18 ul.onclick = function(event){ 19 var tar = event.target; 20 if(tar.nodeName.toLowerCase() == "button"){ 21 tar.parentNode.parentNode.removeChild(tar.parentNode); 22 } 23 } 24 </script>
给ul添加了点击事件,点击ul里面的子元素,event.target都会返回当前点击的元素节点,做一个判断,如果点击了button标签,删除这个li节点。由于添加的li都在ul节点里面,所以并不用再去添加li事件里面去写代码了,是不是很方便呢。
转载于:https://www.cnblogs.com/0828-li/p/8882071.html
target和currentTarget相关推荐
- js中的target与currentTarget的区别转
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- FLEX:target和currentTarget属性的区别
所有Event对象都有target和currentTarget属性,target属性可引用事件分派对象,currentTarget属性可引 用正在被检测事件监听器的当前节点.也就是说target当前你 ...
- js中Event 对象 target 与 currentTarget的应用
http://www.cnblogs.com/meng1314-shuai/p/7455575.html Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠 ...
- target和currentTarget的区别
target 和currentTarget 都是对一个触发事件的对象的引用. 不同之处在于: 1,target 是对触发事件的对象的引用 (简称就是事件源,就是那个真实DOM本身) 2,current ...
- target与currentTarget的区别?
比如说现在有A和B,A.addChild(B)A监听鼠标点击事件那么当点击B时,target是B,currentTarget是A也就是说,currentTarget始终是监听事件者,而target是事 ...
- JS事件:target与currentTarget区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对 ...
- vue中的target与currentTarget区别
<template><transition name="slide"><div class="top_box" @click=&q ...
- e.target与e.currentTarget的作用
要说清楚这个东西,还不太好阐述呢,所以,先看看下面的代码: [html] view plain copy <!DOCTYPE html> <html> <head lan ...
- event.target与event.currentTarget的差异
event.target与event.currentTarget的差异(完整版) 1.什么是target?什么是currentTarget? event.target 是发生事件的元素或触发事件的元素 ...
最新文章
- 设置Squid Cache_mem大小
- 研究生导师为什么喜欢问学生家境?我帮你们问了几个导师
- 跟我一起考PMP--项目质量管理
- PNG 图片压缩原理的两个关键点!
- 数据结构基础:图结构的学习笔记
- 软件架构之道的一次感悟
- enityframework 已连接的当前状态为打开。_蓝牙连接有问题吗?尝试针对macOS的以下6个修复程序
- 启动angular项目,端口被占用
- BZOJ2115 [WC2011]最大XOR和路径
- 《统计自然语言处理》(宗成庆)学习笔记(一)
- python-can库基于PCAN-USB使用方法
- ubuntu 18.04 安装conda环境 及 创建虚拟环境
- 非科班学弟如何转行斩获 ATM 大厂的 Offer ?
- java基础--名词解释汇总
- PAT 甲级 1108 Finding Average (20 分)
- 服务器有必要更新主板芯片组吗,芯片组驱动要不要更新_芯片组驱动卸载了会怎么样...
- java调用excel在页面生成饼状图_Java 在 Excel 中创建饼图/环形图
- 称球问题解析(1)- 12球
- 网络隧道Tunnel技术
- Mac basictex缺少xxx.sty文件
热门文章
- win7下更改设置时间权限
- C++ 类的保护继承与构造函数
- expand--符号矩阵的展开
- 程序员编程艺术第二章
- cart2pol函数
- sublime搭建C/C++编译环境(超完美的配置并配上内容详细讲解!!)
- A除以B (20) (模拟除法)
- android线程栈默认大小,线程的默认最大堆栈大小 - Internet Information Services | Microsoft Docs...
- 防盗链测试01 - Jwplayer+Tengine2.3.1 mp4模块打造流媒体测试服务器
- Spring @Autowired 注入为 null