`
Rainbow702
  • 浏览: 1074116 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

Javascript中, event 的 target 与 currentTarget 的区别

javascripteventtargetcurrtentarget冒泡 
阅读更多

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<script type="text/javascript">
	function test(e){  
         alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }
	</script>
</head> 
<body> 
	<div id="outer" style="background:#099" onclick="test(event)">  
		click outer  
		<p id="inner" style="background:#9C0">click inner</p>  
		<br>  
    </div> 
</body> 
</html>

 

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

本文转自：萤火开发网

作者：月高不知归

 

分享到：
| Javascript中， setTimeout() 和 setInterv ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    Javascript中的事件--Event对象

    下面我们将深入探讨`Event`对象的关键属性和方法，以及它们在JavaScript中的应用。 ### 1. `Event`对象的基础属性 - **`type`**：表示事件的类型，例如`click`、`mousemove`等。 - **`target`**：返回事件最初触发...

    一些常用的特效包括一些javascript中event对象的使用

    在JavaScript中，`Event`对象是所有事件的基础，它提供了与事件相关的各种信息。这些信息通常包括事件类型、键盘按键值、鼠标点击位置等。 #### 1.2 常用事件属性 - `keyCode`: 键盘事件发生时按下的键的虚拟键码。...

    javascript currentTarget对象介绍

    在JavaScript的事件处理机制中，`currentTarget` 是一个非常重要的概念，尤其在事件委托（Event Delegation）和事件冒泡（Event Bubbling）的过程中扮演着关键角色。本文将从多个角度对 `currentTarget` 进行深入...

    window.event 对象详解

    在JavaScript编程语言中，`window.event`对象是一个特殊对象，它与浏览器的事件处理机制紧密相关。这个对象在大部分浏览器环境中（尤其是老版本的IE）是全局可用的，提供了当前事件的相关信息。本文将深入探讨`...

    window对象--event对象详解

    Event对象则是JavaScript事件处理中的核心，它包含了与特定事件相关的所有信息，如事件类型、事件目标等。 在深入讲解Window对象和Event对象之前，我们先了解一些基础概念。JavaScript是一种基于原型的动态类型语言...

    js中的event对象1

    在JavaScript中，`event`对象是处理事件时不可或缺的一部分，它包含了与事件相关的各种信息。在上述内容中，我们看到了三种不同类型的事件对象：鼠标事件、键盘事件以及文档的`load`事件。让我们深入探讨这些事件...

    JavaScript事件对象深入详解

    事件对象(event object)包含了与事件相关的所有信息，如触发事件的元素、事件类型以及特定事件的额外数据。这篇深入详解将帮助我们理解如何在DOM（文档对象模型）以及不同浏览器环境下有效地使用事件对象。 在DOM中...

    javascript事件模型

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

    HTML DOM Event 对象

    在W3C的2级DOM事件标准中，引入了更多通用属性，如`event.bubbles`（判断事件是否冒泡）、`event.cancelable`（决定是否可以取消事件的默认行为）和`event.currentTarget`（当前处理事件的元素，不同于`event.target...

    JS和JQ的event对象区别分析

    这与JS中的`event.target`不同，`currentTarget`可以用于区分事件处理函数是在哪个元素上绑定的，而`target`则表示触发事件的原始元素。此外，JQ的`event.delegateTarget`则指明了事件委托的元素，即监听事件的元素...

    关于javascript event flow 的一个bug详解

    在DOM规范中，当`event.currentTarget`等于`event.target`时，表示事件已经到达目标元素，此时处于目标阶段，不应再执行捕获阶段的监听器。 在上述的bug中，当`useCapture`设置为`true`的监听器被添加到`event....

    Event 对象的使用方法

    在2级DOM事件标准中，Event对象增加了更多属性，如`bubbles`、`cancelable`、`currentTarget`、`eventPhase`、`target`、`timeStamp`和`type`，这些属性提供了事件传播、取消、目标和时间戳等信息。 总的来说，...

    javaScript事件学习小结（四）event的公共成员（属性和方法）

    1. currentTarget和target的区别与应用场景 在事件处理程序中，this关键字、event.currentTarget以及event.target经常被使用。其中，this关键字总是指向绑定事件处理程序的当前元素（currentTarget）。而event....

    javascript事件综合查询

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

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

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

    jquery中event对象属性与方法小结

    首先，`event.target`是事件触发的原始DOM元素，即使事件在冒泡过程中经过了其他元素，`event.target`始终指向事件最初的源头。这在需要判断事件起始位置或防止不必要的事件处理时特别有用。 `event.pageX`和`event...

Magicbox
Global site tag (gtag.js) - Google Analytics