`

js target&currentTarget

 
阅读更多

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body> 
    <div id="outer">
        outer
        <p>
            inner
        </p>
    </div>
</body>
<script type="text/javascript">
(function(){
    var a=document.getElementById('outer');
        a.addEventListener('click',function(e){
        alert(e.target.innerHTML);
        alert(e.currentTarget.innerHTML);
        alert(e.currentTarget === e.target);
    },false);
})();
</script>
</html>

 

 

线测试可查看效果,http://runjs.cn/

 

结论:关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶 段,currentTarget处理事件流的捕获、处于目标阶段和冒泡阶段。只有当他们同事处于目标阶段的时候他们的指向才是一样的。

 

转自:http://www.cnblogs.com/super-d2/archive/2012/06/11/2545180.html

分享到:
评论

相关推荐

    Javascript中, event 的 target 与 currentTarget 的区别

    当我们谈论`event`对象时,`target`和`currentTarget`是两个非常关键的属性,它们在处理事件流时扮演着重要角色。理解这两个属性的区别对于编写高效且准确的事件处理程序至关重要。 `event.target`指的是触发事件的...

    JS target与currentTarget区别说明

    在JavaScript中,处理事件时,`target` 和 `currentTarget` 是两个非常重要的属性,它们在事件流的不同阶段有着不同的作用。理解这两个属性的区别对于编写高效且精确的事件处理程序至关重要。 首先,让我们来深入...

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

    今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

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

    在js部分的click函数中,通过console.log打印出e.target和e.currentTarget的值。当用户点击子组件时,e.target会输出子组件的信息,因为是子组件触发了点击事件。同时,e.currentTarget会输出父组件的信息,因为点击...

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

    其中,处理事件中的两个重要的参数是`e.target`和`e.currentTarget`。这两个参数虽然在某些情况下看似相同,但它们之间有着本质的区别,理解这两个参数的不同可以帮助开发者更好地控制事件的执行流程和数据传递。 ...

    javascript currentTarget对象介绍

    JavaScript currentTarget 对象介绍 JavaScript 中的 currentTarget 对象是 Event 对象的一个属性,它始终指向当前事件的当前目标元素,即触发事件的元素。在事件冒泡过程中,currentTarget 的值会改变,以反映当前...

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

    在JavaScript的事件处理中,`event.currentTarget` 和 `event.target` 是两个非常重要的属性,它们在处理DOM元素上的事件时起到关键作用。本文将详细解释这两个属性的区别,并通过实际的测试代码来帮助理解。 首先...

    HTML5自定义属性的问题分析

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

    Js控制链接打开方式

    const currentTarget = link.getAttribute('target'); if (currentTarget === '_blank') { link.target = link.dataset.defaultTarget; // 恢复为默认 } else { link.target = '_blank'; // 更改为新窗口打开 ...

    tweenjs.min.js文件

    function Event(a,b,c){this.type=a,this.target=null,this.currentTarget=null,this.eventPhase=0,this.bubbles=!!b,this.cancelable=!!c,this.timeStamp=(new Date).getTime(),this.defaultPrevented=!1,this....

    JavaScript事件对象深入详解

    当事件处理程序直接绑定到目标元素上时,`this`、`currentTarget`和`target`三个值相同。但当处理程序绑定到父元素时,它们会有差异,例如: ```javascript document.body.onclick = function(event) { console....

    javascript事件模型

    例如,`event.type`表示事件类型,`event.target`表示事件最初发生的位置,而`event.currentTarget`表示当前正在处理事件的节点。`eventPhase`常量指明事件处于哪个阶段(1 - 捕获,2 - 目标,3 - 冒泡)。`event....

    JavaScript的MVC框架Gillie.zip

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

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

    this.getParentTag(event.target); ``` 这个函数首先检查`startTag`是否是HTMLElement类型,然后获取其父元素的`nodeName`。如果父元素不是`BODY`,并且当前元素不是`TD`,函数会继续向上遍历,直到找到`TD`元素...

    javascript事件综合查询

    事件源(event.target)是实际触发事件的元素,而事件当前目标(event.currentTarget)是在事件处理程序上下文中处理事件的元素,可能与事件源不同。 总结,JavaScript事件综合查询涵盖了从基础的事件处理到高级的...

    u1_lesson_event_bubbling:本课介绍了JavaScript中的事件冒泡

    区分事件的target和currentTarget 停止事件传播 课程说明 什么是事件冒泡? 当元素嵌套在DOM中时,DOM需要一种方法来确定应该触发事件的元素。 如果在外部元素(绿色框​​)上设置了单击事件侦听器,是否在内部...

    JavaScript常见事件对象与操作实例总结

    3. **事件处理程序中的`this`和`event.target/currentTarget`** - 在事件处理程序内部,`this`始终等于`currentTarget`,它表示注册了事件处理程序的元素。 - `event.target`则表示事件实际触发的元素,可能是`...

    js中的event对象1

    - `currentTarget`和`target`:分别表示当前处理事件的元素和事件实际触发的元素。 - `type`:事件类型,如"click"。 - `pageX`和`pageY`:鼠标点击位置相对于整个文档的坐标。 - `relatedTarget`:在某些特定...

Global site tag (gtag.js) - Google Analytics