• event.target返回触发事件的元素

  • event.currentTarget返回绑定事件的元素

  

 
 1     <ul id="ul">ul
2 <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">ul
2 <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].onclick=function(){
26 this.parentNode.parentNode.removeChild(this.parentNode);
27 }
28 }
29 }
30
31 for(var i=0;i<btnClass.length;i++){
32 btnClass[i].onclick=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事件里面去写代码了,是不是很方便呢。

target和currentTarget的更多相关文章

  1. 三言两语之js事件、事件流以及target、currentTarget、this那些事

    厉害了我的哥--你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...

  2. AS3中 Event 类的target和currentTarget属性

    在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...

  3. target和currentTarget的区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

  4. 事件冒泡和事件捕获以及解释target和currenttarget的区别

    冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...

  5. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  6. js事件、事件流以及target、currentTarget、this那些事

    你是如此简单我却将你给遗忘   前面面试被问到js的事件机制  target.currentTarget.碰巧今天有时间来拔一拔,顺便记下.

  7. target与currentTarget与this的区别

    target与currentTarget与this的区别: target在事件流的目标阶段:currentTarget在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致 ...

  8. 小程序开发 event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...

  9. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  10. js中的target与currentTarget的区别<转>

    关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...

随机推荐

  1. centos7项目部署

    1. 安装nginx   添加CentOS 7 Nginx yum资源库 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/ng ...

  2. Hadoop记录- zookeeper 监控指标

    目前zookeeper获取监控指标已知的有两种方式: 1.通过zookeeper自带的 four letter words command 获取各种各样的监控指标 2.通过JMX Client连接zo ...

  3. 基于Rabbit实现的RPC

    最近在学习项目中的通用技术,其中一个是在项目中会经常使用的基于RabbitMQ实现的RPC.这里一共有三个点要学习,分别是:RPC是什么?RabbitMQ是什么?如何使用RabbitMQ实现RPC.奔 ...

  4. 更改Jenkins的workspace目录

    系统管理→系统设置→主目录(的右边问号下面)→高级(是不是忽略了啊\(^o^)/~)→工作空间根目录 点开后面的问号可以看见3个参数(配置路径需要的): ${JENKINS_HOME} — Jenki ...

  5. Maven安装及配置

    第1部分 准备 1.1 安装JDK和Eclipse: 1.2 下载Maven(https://maven.apache.org/download.cgi) 第2部分 2.1 安装Maven 2.1.1 ...

  6. 史上最污技术解读,让你秒懂IT术语(转载)

    假设你是一位妹子,你的男友沉迷游戏经常不接电话无故宕机,所以当你们约好下午逛街以后你要时不时地打个电话询问,看看他是不是还能正常提供服务,这叫心跳检测. 假设你是一位妹子,你想去逛街而你的男友A在打游 ...

  7. Python中应该使用%还是format来格式化字符串?

    转载自http://www.cnblogs.com/liwenzhou/p/8570701.html %的特点是,前面有几个%,后面的括号里就得有几个参数,如果只有一个%,括号可以省略 基本格式 'a ...

  8. WPS或xls 数据分列 清洗

    一 .一般分离 时间:2017年11月27日14:55:12 数据如下: 501陈**:田莨铺58 502陈**:田莨铺58 503陈**.六麻杨冲58元 504陈**.石脚哗.200元 505陈** ...

  9. 如何让vue项目兼容IE浏览器

    一般来说项目开发到后期都需要做各种兼容性处理例如:360.IE9以上.QQ浏览器....等等 那么现在来介绍一个工具 babel-cli 跟 babel-preset-es2015 babel-cli ...

  10. 解决ajax跨域的办法,代理,cors,jsonp

    1.使用php做代理去请求第三方api接口 php是可以跨域的,我们利用ajax请求本域名中的php文件,php再去请求第三方接口文件,从而达到跨域目的. php做代理请求: ajax请求本域名php ...