1. 第一种情况:就是IE9+和其他现代浏览器,支持addEventListener方法。其结果是:

    • this总是等于currentTarget
    • currentTarget总是事件监听者
    • target总是事件发起者
  2. 第二种情况:就是IE678,使用attachEvent方法注册事件。其结果是:

    • this总是等于window
    • target和currentTarget总是undefined,也就是未定义
    • IE专有的srcElement,含义和上面的target一致。总是等于事件发起者
  3. 第三种情况:使用jquery来绑定事件,这里是直接绑定在某个元素上面:

    • this总是等于currentTarget
    • currentTarget总是事件监听者
    • target总是事件发起者
    • 还有一个delegateTarget,这里总是等于currentTarget
  4. 第四种情况:使用jquery来绑定事件,不过这里使用委托:

    $(".con1").on("click", ".btn1", sayClassName);
    • this总是等于currentTarget
    • currentTarget总是事件监听者,这里就是.btn1元素
    • target总是事件发起者,这里也是.btn1元素
    • 还有一个delegateTarget,这里就是委托事件的元素,也就是.con1元素

    如果是下面的代码:

    $(".con1").on("click", ".con2", sayClassName);

    那么delegateTarget还是.con1元素;currentTarget则是.con2元素;target则是.btn1元素;其中.btn1元素是.con2元素的子元素,.con2元素是.con1元素的子元素;

    如果是下面的代码:

    $(".btn1").on("click", ".btn1", sayClassName);

    那么在jquery中是无效的,也就是不能在自己身上委托事件。

总结

总结就是我们只需要关注currentTarget就OK了!

target,currentTarget,delegateTarget,srcElement的更多相关文章

  1. JS的Event各种属性级target/currentTarget/relatedTarget各种目录的解释

    1.Event属性解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Event 2.Event.target/currentTarget/rela ...

  2. 事件触发函数中的this,target,currentTarget,srcElement

    要解释其中的区别,首先要理解浏览器的事件机制, 现在主流的浏览器事件基本是先捕获再冒泡,IE浏览器只有冒泡阶段 事件是在冒泡阶段触发的 看看这个HTML 当我点击"我是父节点的时候" ...

  3. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

  4. js中event.target和event.srcElement的区别

    看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...

  5. e.target 和 e.srcElement 的使用问题

    ie 下的event.srcElement从字面上可以看出来有以下关键字:事件.源(它的意思就是:当前事件的源), 我们可以调用他的各种属性就像:document.getElementById(&qu ...

  6. event.target与event.srcElement

    target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 在标准浏览器下我们一般使用event.target就能解决,然而低版本IE浏览器总是会出些幺蛾子,这时候 ...

  7. e.target和e.srcElement

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  8. target vs currentTarget, clientWidth vs offsetWidth

    width: document < window(browser) < screen document--> clientWidth < offsetWidth(include ...

  9. event.srcElement与event.target的区别

    window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...

随机推荐

  1. BZOJ 1014 火星人prefix

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...

  2. 关于如何在BCB中使用CodeGuard

    作者:深圳虫 来自:深圳虫网本文来自http://www.szbug.com/disparticle.aspID=4 一. 为什么写这篇东西自己在使用BCB5写一些程序时需要检查很多东西,例如内存泄漏 ...

  3. Caption,Text,WindowText的区别——TControl也有FText,是为了模拟一个窗口

    TControl = class(TComponent) // 控件的Windows功能从TControl开始 property Caption: TCaption read GetText writ ...

  4. common tar command

    Compress tar -cvzf jy2653.2.tgz jy2653.2 Decompress tar -xvf jy2653.1.tgz

  5. BestCoder Round #52 (div.1)

    这周六BC和CF又差点打架,精力不够啊...结果打BC没起来,就看了一眼题跑了...今天早上补补吧,(因为今天晚上还要打UER= =) 先放官方题解: 1000 Victor and Machine ...

  6. awk合并文件一例

    群里的朋友求助: $ cat file1a 1 2 3b 2 3 4c 3 4 5 $ cat file2d 你b 好c 吗 合并两个文件,需要实现: a 1 2 3b 2 3 4 好c 3 4 5 ...

  7. (转载)mysql中百万级数据插入速度测试

    (转载)http://www.111cn.net/database/mysql/42453.htm 100W的数据对于很多朋友来说算小菜了,但今天我就想到创建一个大量数据的测试环境,于是找了一下怎么插 ...

  8. 图论(KM算法):COGS 290. [CTSC2008] 丘比特的烦恼

    290. [CTSC2008] 丘比特的烦恼 ★★★   输入文件:cupid.in   输出文件:cupid.out   简单对比 时间限制:1 s   内存限制:128 MB 随着社会的不断发展, ...

  9. Contains Duplicate II ——LeetCode

    Given an array of integers and an integer k, find out whether there there are two distinct indices i ...

  10. 使用Sublime Text搭建python调试环境

    原文地址:http://blog.csdn.net/wenxuansoft/article/details/38559731 pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的 ...