target和currentTarget属性的区别
2014-06-06 13:42
633 查看
比如说现在有A和B,A.addChild(B)A监听鼠标点击事件那么当点击B时,target是B,currentTarget是A也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者。
1、target发生在事件流的目标阶段,而currentTarget发生在事件流的整个阶段(捕获、目标和冒泡阶段)
2、只有当目标流处于目标阶段的时候才相同
3、而当事件流处于捕获和冒泡阶段时,target指向被点击的对象,而currentTarget指向当前事件活动的对象,通常是事件的祖元素。
例如:
在outer上点击时,target跟currentTarget是一样的,都是div,而在inner上点击时,e.target是p、e.currentTarget是div
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>
比如说现在有A和B,A.addChild(B)A监听鼠标点击事件那么当点击B时,target是B,currentTarget是A也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者
1、target发生在事件流的目标阶段,而currentTarget发生在事件流的整个阶段(捕获、目标和冒泡阶段)
2、只有当目标流处于目标阶段的时候才相同
3、而当事件流处于捕获和冒泡阶段时,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.getElementByIdx_x(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上点击时,target跟currentTarget是一样的,都是div,而在inner上点击时,e.target是p、e.currentTarget是div
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>
比如说现在有A和B,A.addChild(B)A监听鼠标点击事件那么当点击B时,target是B,currentTarget是A也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者
相关文章推荐
- flash对象中target与currentTarget属性的区别
- FLEX:target和currentTarget属性的区别
- event对象中 target和currentTarget 属性的区别。
- MouseEvent的click事件的currentTarget和target属性的区别
- 事件对象的target和currentTarget属性区别
- Flex的 Event中属性currentTarget与target的区别
- event对象中 target和currentTarget 属性的区别
- AS3.0 target和currentTarget属性的区别
- FLEX:target和currentTarget属性的区别
- FLEX:target和currentTarget属性的区别
- event对象中 target和currentTarget 属性的区别。
- event对象中 target和currentTarget 属性的区别。
- as3.0 中target属性和currentTarget属性的区别
- Flex的 Event中属性currentTarget与target的区别
- MouseEvent的target和currentTarget属性区分
- currentTarget 与 Target 的区别(转载)
- JS target与currentTarget区别说明
- 事件处理基础知识(二)事件里的currentTarget 和 target的区别?
- target属性里_blank _self _top _parent区别
- Event中target与currentTarget的区别