JS target与currentTarget区别说明

代码如下:

<div id="outer" style="background:#099">
click outer
<p id="inner" style="background:#9C0">click inner</p>
<br>
</div>

<script type="text/javascript">
function G(id){
return document.getElementById(id);
}
function addEvent(obj, ev, handler){
if(window.attachEvent){
obj.attachEvent("on" + ev, handler);
}else if(window.addEventListener){
obj.addEventListener(ev, handler, false);
}
}
function test(e){
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
}
var outer = G("outer");
var inner = G("inner");
//addEvent(inner, "click", test);
addEvent(outer, "click", test);
</script>

上面的示例中，当在outer上点击时，e.target与e.currentTarget是一样的，都是div；当在inner上点击时，e.target是p，而e.currentTarget则是div。

赞 (0)

相关推荐

  • 用javascript来控制 链接的target 属性的代码

    在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题. HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.

  • JavaScript replace(rgExp,fn)正则替换的用法

    代码如下: 复制代码 代码如下: var rxhtmlTag = /(<([\w:]+)[^>]*?)\/>/g, rselfClosing = /^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i, fcloseTag = function(all, front, tag) { return rselfClosing.test(tag) ? all : front + "></" + tag +

  • js 有框架页面跳转(target)三种情况下的应用

    1.跳出框架,在父页面. jsp: 复制代码 代码如下: <script language="javascript"> window.parent.frames.location.href="../welcome.en" </script> java: 复制代码 代码如下: PrintWriter out = response.getWriter(); out.write("<script type='text/javascr

  • JavaScript获得表单target属性的方法

    本文实例讲述了JavaScript获得表单target属性的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.asp" target="_blank"> First name: <input type="text" name="fnam

  • javascript currentTarget对象介绍

    javascript currentTarget对象介绍

    var show = function (e) { /* 这样按下鼠标由于onclick事件是由冒泡触发的,所以event.srcElement || event.target是IMG对象,而不是A对象 IE解决方法是当前获得焦点的对象即document.activeElement,则FF和OP是event.currentTarget对象 具体代码如下 */ alert((e.currentTarget || document.activeElement).tagName); }; [Ctrl+

  • JavaScript中常用的验证reg

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

  • JS target与currentTarget区别说明

    复制代码 代码如下: <div id="outer" style="background:#099"> click outer <p id="inner" style="background:#9C0">click inner</p> <br> </div> <script type="text/javascript"> functio

  • 微信小程序中target和currentTarget的区别小结

    前言 在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时 currentTarget和target都是组件的一些属性值集合,由"data-属性名"定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元素还是父元素,都是当前事件,应用e.currentTarget target:触发事件的源组件(事件注册/绑定所在组件) 举个例子: &

  • js中innerText/textContent和innerHTML与target和currentTarget的区别

    js中innerText/textContent和innerHTML与target和currentTarget的区别

    一.获取/赋值文本值innerText/textContent.innerHTML <body> <div id="box_text"> <p style="color:hotpink;">muzidigbig</p> <p style="color:pink">lovely</p> </div> <input type="text" i

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

  • jQuery中each和js中forEach的区别分析

    本文实例讲述了jQuery中each和js中forEach的区别.分享给大家供大家参考,具体如下: <script> $(function(){ // 3.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 3.1.1通过原生方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 返回值:没有返回值 var res = arr.forEach(function(ele, idx){ console.log(idx, ele);

  • 浅谈JS和jQuery的区别

    浅谈JS和jQuery的区别

    一.本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是一个JavaScript函数库.或者说是JavaScript. 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如: 库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,

  • 微信小程序 image组件binderror使用例子与js中的onerror区别

    微信小程序image组件binderror使用例子(对应html.js中的onerror) 官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.g

  • js中!和!!的区别与用法

    js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和空字符串取反都为false,其余都为true. !null=true !undefined=true !''=true !100=false !'abc'=false 2.!!常常用来做类型判断,在第一步!(变量)之后再做逻辑取反运算,在js中新手常常会写这样臃肿的代码: 判断变量a为非空,未定义或者非空串才能执行方法体的内容

  • idea out目录与target目录的区别详解

    idea out目录与target目录的区别详解

    1.out存放的是该项目下所有Module(模块)的编译结果. 2.target存放的是单个Module的编译结果. 3.如果为某个Module指定了编译结果的路径,则不会再输出到out文件夹中了. 你在Project Structure中的Project选项卡中可以设置Project compiler output的目录. 在Modules中选择某一个模块后,在右侧的Paths选项卡中可以设置该模块的Compiler output目录. 补充:idea web项目中out(maven中是tar

  • js字符编码函数区别分析

    1.escape对ansi码0-255以外的字符进行编码输出%u****格式即unicode值,escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式).所有空格.标点.重音符号以及其他非 ASCII 字符都用 %xx 编码代替,其中 xx 等于表示该字符的十六进制数.例如,空格返回的是 "%20"  escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z 2.encodeURI类似escape,用于地址栏编码  en

随机推荐