你好JS：[6]target 、currentTarget 、this

来源：互联网 2023-03-17 00:27:48 262

事件中event的 target 和 currentTarget 以及 this 的区别，往往令许多初学者分清，其实三者的区别没有那么难，之所以理解不了，恐怕和书本上那些抽象的理念有关。

工具/原料

JS
javaScript
javaScript事件

简单说一下区别

用最简单的语言总结：

target: 代表当前目标对象（事件作用的对象）

currentTarget: 代表注册监听器的对象

this: 和currentTarget一样，即它们的作用相等。

ps:什么是“事件作用的对象”？什么是注册监听器的对象？

>事件作用的对象: 如果是一个点击事件的话，那么你点击了谁，谁就是这个点击事件的作用对象

（你打了谁，谁就是被你打了的对象）

>注册监听器的对象: 监听事件的对象(元素）你点击的元素不一定就注册了监听器，也许是它的子元素或者父元素。

总结：判断三者的关键是：弄清到底是谁注册了监听器，又是谁被点击了（对事件产生作用了）。

currentTarge、this是和“注册监听器的对象”是一伙。target和“当前目标对象”是一对。

2本页面未经许可获取自百度经验

例子

例子1：

html>

head>

/head>

body>

div id="T">/div>

body>

script>

var T = document.getElementById("T");

T.onclick = function () { //用id为"T"的元素注册监听器

alert(event.currentTarget === this); //true

alert(event.target === this); //true

}

/script>

/html>

你好JS：[6]target 、currentTarget 、this

运行代码，点击T元素，结果：true true

你好JS：[6]target 、currentTarget 、this

结论：

事件作用的元素（对象） = 注册监听器的元素(对象)

event.currentTarget = this = event.target = 事件作用的元素（对象） --(例子中的T)

你好JS：[6]target 、currentTarget 、this

例子2：

html>

head>

/head>

body>

div id="T" style="width:500px;height:500px;background:#abc">/div>

body>

script>

var T = document.getElementById("T");

document.body.onclick = function () { //用id为"T"的元素的父元素（body）注册监听器

alert("1: " (event.currentTarget === document.body));

alert("2: " (event.target === document.body));

alert("3: " (event.target === T));

}

/script>

/html>

你好JS：[6]target 、currentTarget 、this

运行代码，点击T元素：

你好JS：[6]target 、currentTarget 、this

结果是:

1:true

2:false

3:true

你好JS：[6]target 、currentTarget 、this

分析：

divT 虽然没有注册监听器，可是当点击它的时候，点击事件会冒泡，当冒泡到body元素时，body的监听器就会处理这个点击事件。

运行代码，点击body元素：

你好JS：[6]target 、currentTarget 、this

结果是:

1:true

2:true

3:true

你好JS：[6]target 、currentTarget 、this

分析：

body是T的父元素，因此点击body根本不会冒泡到T，除非遇到的是捕获事件（onclick是冒泡事件）

结论：

事件作用的元素（对象） =! 注册监听器的元素(对象) ("=!"表示不等于)

event.currentTarget = this = 注册监听器的元素(对象) --(例子中的document.body)

event.target = 事件作用的元素（对象） --(例子中的T)

你好JS：[6]target 、currentTarget 、this

注意事项

本经验由本人原创，没有功劳也有苦劳，没有苦劳也有疲劳，希望能投个票鼓励一下！

Typeof

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签：编程语言

上一篇：如何自学编程语言下一篇：JDBC事务详解实例

你好JS：[6]target 、currentTarget 、this

工具/原料

简单说一下区别

例子

注意事项

热门文章

标签列表