<!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. SQLite如何测试

    原文 http://www.sqlite.org/testing.html 目录 1. 介绍 1.1. 执行总结 2. 测试套件 3.异常测试 3.1 内存溢出测试 3.2 I/O错误测试 3.3 c ...

  2. angularJS 按需加载

    之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...

  3. Hadoop基础知识

    摘要:Hadoop的安装目录了解.etc的核心配置项.hadoop的启动.HDFS文件的block块级副本的存放策略.checkpoint触发设置. 1.hadoop目录了解 bin:可执行文件,命令 ...

  4. jquery-2.0.0

    http://code.jquery.com/jquery-2.0.0.min.js (minified, for production) http://code.jquery.com/jquery- ...

  5. jQuery对json快速赋值

    jQuery对json快速赋值,重点在于将input的id取跟JSON同样的名称. <!DOCTYPE html> <html> <head lang="en& ...

  6. Nop源码分析二

    上文我们已经通过该行代码:var typeFinder = containerManager.Resolve<ITypeFinder>(); 从注入容器中获取到了typeFinder实例. ...

  7. web app响应式字体设置！rem之我见

    之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理.简单.直接,粗暴!但是,开发快.……一劳永逸! 但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊 首先看代码: @medi ...

  8. Thinkphp：有你真好

    ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的.最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且遵循Apache2开源协议发布.ThinkPHP从诞生以来一 ...

  9. 在eclipse上跑hadoop的helloworld

    关于hadoop的用处什么我就不说了,在这里记录下在eclipse上第一次跑hadoop遇到的问题吧~ hadoop的安装我就不说啦,网上教程一大堆~我直接用的公司的Linux上的hadoop. ec ...

  10. VB6SP6极度精简兼容绿色版

    钟爱绿色小巧的软件.怀旧一下,整合了几个资源,做了一个VB6SP6极度精简绿色版. 压缩包大小5M. 网上的极度精简绿色版不是SP6的,特意在其基础上更新了SP6.不是单文件版,所谓单文件版不过是执行 ...