<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{height:2000px;}
div#outer{
background:rgba(0,0,0,0.8);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
div#inner{position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -200px; width: 400px; height: 400px;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">inner</div>
</div>
<script type="text/javascript">
var oOuter= document.getElementById("outer");
oDiv.onclick = function(ev){
debugger;//ev.target==div#inner--------ev.currentTarget==div#outer
}
</script>
</body>
</html>

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。

target与currentTarget区别 ( html是弹窗居中的例子)的更多相关文章

  1. JavaScript target与currentTarget区别

    1.DOM事件绑定到父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  2. 微信小程序中的target和currentTarget区别

    最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...

  3. jS事件:target与currentTarget区别

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

  4. 事件:target与currentTarget区别

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

  5. target与currentTarget区别

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

  6. target和currentTarget的区别

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

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

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

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

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

  9. target与currentTarget与this的区别

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

随机推荐

  1. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  2. laravel5.3----------调度任务以及Artisan

    1.在使用的过程中会遇到有些函数不能用需要在php配置文件里面打开: disable_functions = exec,passthru,popen,proc_open,shell_exec,syst ...

  3. UWP toast

    Windows10的自适应和交互式toast通知是一个新特性.它可以让你: 创建灵活的toast通知,包括内嵌图片及更多的内容,不在局限于之前Windows 8.1和Windows Phone 8.1 ...

  4. 关于firewalld防火墙的使用

    要想使用该防火墙,应该需要安装 networkmanager 并启动其服务.因为之前使用的是 netctl 提供的wifi-menu 来连接无线网络,导致安装networkmanager之后启动 Ne ...

  5. [liusy.api-SMJ]-MAVEN archetype 创建项目

    •选择或创建工作空间 Select a workspace –File – Switch Workspace - other

  6. setCapture只能作用于鼠标不可作用于键盘等其它事件

    处理的优点非常类似于流媒体的优点.分析能够立即开始,而不是等待所有的数据被处理.而且,由于应用程序只是在读取数据时检查数据,因此不需要将数据存储在内存中.这对于大型文档来说是个巨大的优点.事实上,应用 ...

  7. httpclient4 文档翻译

    前言超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要 ...

  8. 查看SQL语句在SQL Server上的执行时间

    set statistics profile onset statistics io onset statistics time ongo--begin <这里写上你的语句...>  se ...

  9. Windows访问Ubuntu14.04远程桌面全攻略

    最近接到一个任务,在Ubuntu系统下开发一个串口读写程序.开发要在台式机上进行,安装UbuntuKylin 14.04,并且在串口连接了设备.个人使用的是笔记本电脑,系统是Windows8.1.自然 ...

  10. Oracle数据访问组件ODAC的安装方法

    Oracle数据访问组件ODAC(Oracle Data Access Components)顾名思义就是用来访问Oracle数据库的小程序.我们可以编程调用这些组件来实现在没有安装Oracle数据库 ...