`
草原雪花
  • 浏览: 10614 次
社区版块
存档分类
最新评论

e.target和e.currentTarget

阅读更多

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

分享到:
评论

相关推荐

    微信小程序事件对象中e.target和e.currentTarget的区别详解

    总结来说,e.target和e.currentTarget的区别主要体现在它们分别表示了事件触发的源头和事件处理函数绑定的目标。e.target可以动态变化,根据点击的位置不同而指向不同的元素;e.currentTarget则是固定的,它指向的是...

    简单了解微信小程序 e.target与e.currentTarget的不同

    总的来说,`e.target`与`e.currentTarget`在微信小程序的事件处理中扮演着关键的角色,它们帮助开发者区分事件的来源和当前处理事件的元素,使得事件处理更加灵活和强大。掌握这两者的区别对于编写高效且正确的事件...

    HTML5自定义属性的问题分析

    后来发现e对象有currentTarget和target属性,而dataset就在currentTarget中,所以通过e.currentTarget.dataset.id取到了正确的值。 另外data-id="1"最好不要用驼峰命名如:data-Id="1" ,这样有时候也取不到值。 ...

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

    currentTarget和target都是组件的一些属性值集合,由“data-属性名”定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),...

    event.currentTarget和document.activeElement用法

    firefox 的 event.currentTarget 和 ie 的 document.activeElement 这两个完全含义不一致的对象却被捆绑在一起做成了浏览器兼容代码。 大家在google搜索的时候 都会发现 document.activeElement || event....

    面试题vue前端面试题.zip

    $nextTick有什么作用? Vue.observable你有了解过吗? template标签有什么用? vue-router怎么重定向页面? vue生命周期总共有几个阶段?...在vue事件中传入$event,使用e.target和e.currentTarget有什么区别?

    vue递归获取父元素的元素实例

    1. **获取兄弟元素**:`e.currentTarget.previousElementSibling` 和 `e.currentTarget.nextElementSibling` 分别用于获取当前元素的前一个和后一个兄弟元素。 2. **获取子元素**:`e.currentTarget....

    微信小程序:漫画小程序项目总结

    4、e.currentTarget.dataset、e.target.dataset 用法,console.log(e) 调试技巧。  5、难点:数组数据下标为动态数据时的取值方法。   项目要求: 1、构建 WXML 模板。  2、使用 wx:for 循环输出四个图片,每个...

    微信小程序中data-key属性之数据传输(经验总结)

    console.log(e.currentTarget.dataset['createdBy']); } // 正确示例 like(e) { console.log(e.currentTarget.dataset['createdby']); } ``` 总之,`data-key`是微信小程序中数据传输的重要工具,它使得在WXML和...

    vue 的点击事件获取当前点击的元素方法

    在大多数情况下,`e.currentTarget`和`e.target`可能是相同的,除非事件传播过程中经过了事件冒泡或捕获。 下面是一个完整的Vue实例,展示了如何使用`e.target`和`e.currentTarget`: ```js export default { ...

    javascript currentTarget对象介绍

    在 IE 中,document.activeElement 将返回当前获得焦点的对象,而在 Firefox 和 Opera 中,e.currentTarget 将返回当前事件的目标元素。 在这个例子中,我们使用了 onclick 事件来触发 show 函数。由于 onclick ...

    tweenjs.min.js文件

    if(a&&e&&(d=e[a.type])&&(c=d.length)){try{a.currentTarget=this}catch(f){}try{a.eventPhase=0|b}catch(f){}a.removed=!1,d=d.slice();for(var g=0;c&gt;g&&!a.immediatePropagationStopped;g++){var h=d[g];h....

    【填坑指南】小程序 view使用bindtap传值问题

    解决方法:把取值方式 由e.target.dataset.carrierName 修改为e.currentTarget.dataset.carrierName即可 免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所

    微信小程序 传值取值的几种方法总结

    当我们处理列表数据时,可以通过给列表项设置`data-index="{{index}}"`属性,然后在事件处理函数中通过`e.currentTarget.dataset.index`获取到当前点击项的索引。例如,在删除操作中,我们可以这样实现: ```html...

    swipe:滑动 jQuery 插件

    刷卡 滑动 jQuery 插件 用法 var options = {bounce : { flag : true , axis : 20 ... $(document).Swipe(function(e){ console.log(e.currentTarget.component.direction); //+1 向左滑动 -1 向右滑动 } } , options);

    JavaScript的MVC框架Gillie.zip

    Gillie 是一个微型的 JavaScript MVC 框架(体积4k),其灵感来自于 Backbone、jQuery ... var target = e.currentTarget;  $( target ).css( 'color', 'red' );  } }); 标签:Gillie Web框架

    最简单的微信小程序拖拽排序列表.zip

    const { id } = e.currentTarget.dataset; this.startDrag(id); } ``` 四、拖拽实现 1. **开始拖拽**:在`startDrag`方法中,记录当前被拖动的元素及其位置: ```javascript startDrag(id) { this.setData({ ...

Global site tag (gtag.js) - Google Analytics