event.currentTarget与event.target的区别介绍

event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.
即，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>​
当点击click here!时click会向上冒泡，输出如下：
#wrapper
<div id=​"wrapper">​…​</div>​
<div id=​"wrapper">​…​</div>​
*/
</script>

赞 (0)

相关推荐

  • event.currentTarget与event.target的区别介绍

    event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurre

  • 关于event.cancelBubble和event.stopPropagation()的区别介绍

    首先我在网上看到不少文章大体上分为两个(不正确)观点: 1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器. 先不讲上面是对是错 先看一个例子:(测试环境:chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

  • js中的触发事件对象event.srcElement与event.target详解

    js中的触发事件对象event.srcElement与event.target详解

    介绍 IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: firefox 下的 event.target = IE 下的 event.srcElement 解决方法 使用obj = event.srcElement ? event.srcElement : event.target; 或:var evtTarget = event.target || eve

  • vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

    vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在; 实现如下 maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它 <div class="mask" v-show="maskSho

  • onkeyup，onkeydown和onkeypress的区别介绍

    msdn上有三者的区别: 名称 说明 onkeypress 这个事件在用户按下并放开任何字母数字键时发生.系统按钮(例如,箭头键和功能键)无法得到识别. onkeyup 这个事件在用户放开任何先前按下的键盘键时发生. onkeydown 这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生. ====================== 复制代码 代码如下: <html> <script> function checkForm(){ if(event.keyCode

  • jQuery获取attr()与prop()属性值的方法及区别介绍

    今天在项目中使用<select></select>下拉菜单时,使用juery操作,使页面加载完菜单默认选中的值为2,我一开始的操作如下: <!--html部分--> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3&l

  • js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    前言 在阅读本文前,相信大家应该都有所了解,在js获取键盘按下的键值有:event.keyCode.event.charCode和event.which. 其中: 谷歌浏览器:对event.keyCode.event.charCode和event.which都兼容. 火狐浏览器:对event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效. event.which也是部分键值有效,如字母

  • 详解Spring中使用@within与@target的区别

    详解Spring中使用@within与@target的区别

    项目里用到@within时,出现了一些问题,使用@target就可以解决,但又会出现一些新的问题,因此本文探讨了在spring中,使用@within和@target的一些区别. 背景 项目里有一个动态切换数据源的功能,我们是用切面来实现的,是基于注解来实现的,但是父类的方法是可以切换数据源的,如果有一个类直接继承这个类,调用这个子类时,这个子类是不能够切换数据源的,除非这个子类重写父类的方法. 模拟项目例子 注解定义: @Target({ElementType.METHOD, ElementTy

  • 正则表达式中test、exec、match的区别介绍及括号的用法

    正则表达式中test、exec、match的区别介绍及括号的用法

    test.exec.match的简单区别 1.test test 返回 Boolean,查找对应的字符串中是否存在模式. var str = "1a1b1c"; var reg = new RegExp("1.", ""); alert(reg.test(str)); // true 2.exec exec 查找并返回当前的匹配结果,并以数组的形式返回. var str = "1a1b1c"; var reg = new Re

  • oracle中存储函数与存储过程的区别介绍

    在oracle中,函数和存储过程是经常使用到的,他们的语法中有很多相似的地方,可是也有它们的不同之处,这段时间刚学完函数与存储过程,来给自己做一个总结: 一:存储过程:简单来说就是有名字的pl/sql块. 语法结构: create or replace 存储过程名(参数列表) is --定义变量 begin --pl/sql end; 案例: create or replace procedure add_(a int,b int) is c int; begin c:=a+b; dbms_ou

随机推荐