target,currentTarget和this三者的区别
target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(注册该事件的对象)(一般为父级)。this指向永远和currentTarget指向一致(只考虑this的普通函数调用)。
<div id="outer" style="background:#099">
click outer
<p id="inner" style="background:#9C0">click inner</p>
<br>
</div>
<script type="text/javascript">
function G(id){
return document.getElementById(id);
}
function addEvent(obj, ev, handler){
if(window.attachEvent){
obj.attachEvent("on" + ev, handler);
}else if(window.addEventListener){
obj.addEventListener(ev, handler, false);
}
}
function test(e){
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
}
var outer = G("outer");
var inner = G("inner");
//addEvent(inner, "click", test);
addEvent(outer, "click", test);
</script>
解析:
当点击inner对象的时候,先触发inner绑定的事件,再触发outer绑定的事件,(因为outer是在事件冒泡阶段绑定的,如果outer是在捕获阶段绑定的,就会先触发out的事件程序,即便inner事件也绑定在捕获阶段。因为捕获流从根部元素开始)。
事件流:捕获(自顶而下)——目标阶段——冒泡(自下而顶)
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。
target,currentTarget和this三者的区别的更多相关文章
- jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- string、Empty和null三者的区别
string.Empty和null三者的区别 本文转自 http://www.bitscn.com/pdb/dotnet/201003/181883.html 时间:2010-03-01 00:00 ...
- android Activity类中的finish()、onDestory()和System.exit(0) 三者的区别
android Activity类中的finish().onDestory()和System.exit(0) 三者的区别 Activity.finish() Call this when your a ...
- 菜鸟,大牛和教主三者的区别(转自hzwer)
菜鸟,大牛和教主,三者的区别 对菜鸟来说题目有三种:会算法且能AC的,会算法但不能AC的,不会做的 对大牛来说题目有两种:会做的,不会做的 对教主来说题目有两种:能AC的,数据有错的 菜鸟提交WA了, ...
- UIColor,CGColor,CIColor三者的区别和联系
UIColor,CGColor,CIColor三者的区别和联系((转)) 最近看了看CoreGraphics的东西,看到关于CGColor的东西,于是就想着顺便看看UIColor,CIColor,弄清 ...
- /storage/sdcard, /sdcard, /mnt/sdcard 三者的区别
原文地址: /storage/sdcard, /sdcard, /mnt/sdcard 三者的区别 - petercao - 博客园 http://www.cnblogs.com/bluestorm/ ...
- String,StringBuilder,StringBuffer三者的区别
参考 String,StringBuilder,StringBuffer三者的区别 这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面. 1.运行速度 首先说运行速度,或者说是执行速 ...
- this指向和apply,call,bind三者的区别
一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...
- ava、Python和PHP三者的区别
Java.Python和PHP三者的区别 2017年07月15日 22:09:21 书生_AABB 阅读数:18994 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...
随机推荐
- Python之路,day12-Python基础
Mysql数据库操作 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据 ...
- C-随笔
C语言的设计哲学之一: 程序员知道自己在干什么-没有安全带! 值的类型并不是值的内在本质, 而是取决于它被使用的方式 1.#include <stdio.h>在预处理器处理的时候把stdi ...
- GridView_RowCommand事件中取得GridViewRow
GridViewRow row = ((Control)e.CommandSource).BindingContainer as GridViewRow;
- Maven最佳实践:Maven仓库(转)
转自:http://juvenshun.iteye.com/blog/359256 什么是Maven仓库 在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下,往往会看到一个名为/li ...
- 阿里云 crp kelude远程部署tomcat8 重启tomcat脚本
部署包路径:/usr/local/tomcat/webapps 应用服务启动脚本路径:/usr/local/tomcat/bin/restart.sh 部署授权帐号:tomcat restart.sh ...
- Hadoop学习笔记
今天开始要学习Hadoop!开始向"大数据"领域靠拢! 从头开始对于连何为Hadoop都不清楚的人,有好多东西要学,加油! 1.下载hadoop,官网地址:http://mirro ...
- Spring Security 3整合CAS 实现SSO
spring security 3整合cas client用于实现各Application之间的单点登录. 1. 需要准备的jar spring-security-core-3.0.8.RELEASE ...
- Spring JDBC实现查询
1 db.properties jdbc.user=root jdbc.password=920614 jdbc.driverClass=com.mysql.jdbc.Driver jdbc.jdbc ...
- Zedboard安装桌面系统ubuntu及opencv(1)
最近一直在搞板子,想帮Zedboard安装一个opencv谁知道困难重重,而且网络几乎没有任何资料可以参考,只有陆佳华的<嵌入式软硬件协同设计实战指南>可以参考. 但是这本书讲得不清不楚, ...
- Python忽略warning警告错误
python开发中经常遇到报错的情况,但是warning通常并不影响程序的运行,而且有时特别讨厌,下面我们来说下如何忽略warning错误. 在说忽略warning之前,我们先来说下如何主动产生war ...