事件:target与currentTarget区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。

 1     <div id="outer" style="background:#099">   2         click outer   3         <p id="inner" style="background:#9C0">click inner</p>   4         <br>   5     </div>   6        7     <script type="text/javascript">   8     function G(id){   9         return document.getElementById(id);      10     }  11     function addEvent(obj, ev, handler){  12         if(window.attachEvent){  13             obj.attachEvent("on" + ev, handler);  14         }else if(window.addEventListener){   15             obj.addEventListener(ev, handler, false);  16         }  17     }  18     function test(e){  19         alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  20     }  21     var outer = G("outer");  22     var inner = G("inner");  23     //addEvent(inner, "click", test);  24     addEvent(outer, "click", test);  25     </script>  

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

本文转自:萤火开发网

作者:月高不知归

时间: 2024-11-13 01:25:21

事件:target与currentTarget区别的相关文章

JavaScript target与currentTarget区别

1.DOM事件绑定到父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co

jS事件:target与currentTarget区别

target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级). 1 <div id="outer" style="background:#099"> 2 click outer 3 <p id="inner" style=&

target与currentTarget区别

target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级). <div id="outer" style="background:#099">          click outer          <p id="inner&q

target与currentTarget区别的简单讲解

来自为w3schol(http://www.w3school.com.cn/jsref/dom_obj_event.asp)上的解释为: target    返回触发此事件的元素(事件的目标节点). currentTarget    返回其事件监听器触发该事件的元素. 看例子: <div id="outer"> outer <p> inner </p> </div> <script type="text/javascrip

target与currentTarget的区别

我的理解在下面的代码中显示,currentTarget比target来的更具体些,点那个就是哪个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

事件冒泡和事件捕获以及解释target和currenttarget的区别

冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #son{ width: 200px

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

关于js中event的target和currentTarget的区别

今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? 通俗易懂的说法: 比如说现在有A和B, A.addChild(B) A监听鼠标点击事件 那么当点击B时,target是B,currentTarget是A 也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者 总结: target在事件流的目标阶段:currentT

target与currentTarget与this的区别

target与currentTarget与this的区别: target在事件流的目标阶段:currentTarget在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致的. 当处于捕获和冒泡阶段的时候,target指向被单击的对象,而currentTarget指向当前事件活动的对 象(注册该事件的对象,一般为父级). this指向永远和currentTarget指向一致(这里只针对this的普通函数调用). target与currentTarget的区别: eve