event.currentTarget与event.target的差别想大家在使用的时候不是非常在意。本文以測试代码来解说它门之间的不同。即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。翻译的不专业,好拗口啊,还是直接上測试代码吧:  
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上測试输出例如以下:
当点击click here!时click会向上冒泡,输出例如以下:
#inner
<a href=​"#" id=​"inner">​click here!​</a>​
<a href=​"#" id=​"inner">​click here!​</a>​
#wrapper
<div id=​"wrapper">​…​</div>​
<a href=​"#" id=​"inner">​click here!​</a>​
*/
</script>

event.currentTarget与event.target的差别介绍的更多相关文章

  1. event.currentTarget和event.target的区别

    currentTarget始终是监听事件者,而target是事件的真正发出者.

  2. Flex的 Event中属性currentTarget与target的差别

    Flex的 Event中属性currentTarget与target的差别 1.差别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  3. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  4. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...

  5. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  6. event.target和event.currentTarget区别

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  7. event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素

    event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素

  8. Event.target和Event.currentTarget的区别

    <style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...

  9. JavaScript Event Delegation, and event.target vs. event.currentTarget

    原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...

随机推荐

  1. 试用php的ping命令

    使用PHP自动PING IP,校检网络连接是否正常! <?php $server = 'ping kalvin.cn -n 1'; $last_line = exec($server, $arr ...

  2. Django 创建新项目后要完成的几个步骤

    首先,在过一遍创建新项目的步骤: -创建一个新项目 -建了数据库后要确定自己是用 mysql数据库  还是用 sqlite3数据库 -如果是mysql数据库,那一堆配置 -如果是sqlite3数据库, ...

  3. Grafana+Zabbix+Prometheus 监控系统

    环境说明 软件 版本 操作系统 IP地址 Grafana 5.4.3-1 Centos7.5 192.168.18.231 Prometheus 2.6.1 Centos7.5 192.168.18. ...

  4. BZOJ 4517 组合数+错排

    思路: 预处理错排 然后C(n,m)*s[n-m-1]就是答案了 特判n-m-1<0 //By SiriusRen #include <cstdio> using namespace ...

  5. 脑洞大开加偏执人格——可持久化treap版的Link Cut Tree

    一直没有点动态树这个科技树,因为听说只能用Splay,用Treap的话多一个log.有一天脑洞大开,想到也许Treap也能从底向上Split.仔细思考了一下,发现翻转标记不好写,再仔细思考了一下,发现 ...

  6. java热部署

    最近使用java做项目,研究了一下热部署,能够提高工作效率. 需要准备的工具: 1.安装文件http://update.zeroturnaround.com/update-site/ 2.破解 下载破 ...

  7. Vue2-Editor 使用

    Vue-Editor底层采取的是quill.js,而quill.js采用的是html5的新属性classList,所以版本低于ie10会报错“无法获取未定义或 null 引用的属性‘confirm’” ...

  8. Android Activity has leaked window that was originally added

    今天调试程序时log中突然打印这样的错误,但是程序并没有crash,为了不放过一个错误,我决定调查一下. 当时是离开一个activity,然后提示是否退出此界面,接下来就打印此错误: - ::): A ...

  9. 联想笋尖S90(S90-t 、S90-u)解锁BootLoader

    工具下载链接: http://pan.baidu.com/s/1eSgZuka 备用下载链接: http://pan.baidu.com/s/1dFKqSId 本篇教程,仅限于联想笋尖S90(S90- ...

  10. angular2之组件通讯

    定义父组件,在父组件中以路由插座形式引入子组件,定义相关输入输出属性 可以在同一模块内部定义多个组件,将一个组件引入另一个组件中去:也可以该模块整体导出,将该模块导入到其他模块,这样此模块中的组件就能 ...