Javascript中事件对象的target和this的区别
程序员文章站
2022-03-11 15:00:25
...
在学习事件对象的时候,总是认为
target
和this
是一样的,直到后来才发现两者的区别还是挺大的,今天就带大家一起来看看。1.当触发对象与绑定对象一致时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="list"> <li class="itm">item1</li> <li class="itm">item2</li> <li class="itm">item3</li> <li class="itm">item4</li> <li class="itm">item5</li> </ul> <script> const li=document.querySelector("ul li:nth-of-type(4)"); console.log(li); li.addEventListener("click",function(e){ console.log(e.target); console.log(this); }); </script> </body> </html>
点击item4
这个li
后,两者返回如下:
2.当触发对象与绑定对象不一致时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="list"> <li class="itm">item1</li> <li class="itm">item2</li> <li class="itm">item3</li> <li class="itm">item4</li> <li class="itm">item5</li> </ul> <script> const ul=document.querySelector("ul"); console.log(ul); ul.addEventListener("click",function(e){ console.log(e.target); console.log(this); }); </script> </body> </html>
点击item4
这个li
后,输出如下:
3.总结:
target
返回的是事件触发对象this
返回的是事件绑定对象
推荐:《2021年js面试题及答案(大汇总)》
以上就是Javascript中事件对象的target和this的区别的详细内容,更多请关注其它相关文章!
上一篇: php有几种编码
下一篇: JS做出折叠展开动画(附代码)
推荐阅读
-
iOS中containsString和rangeOfString的区别小结
-
简单谈谈c/c++中#import、#include和@class的区别
-
MySQL中REPLACE INTO和INSERT INTO的区别分析
-
详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法
-
Mybatis下动态sql中##和$$的区别讲解
-
Android编程中@id和@+id的区别分析
-
详解iOS中Button按钮的状态和点击事件
-
Java中new关键字和newInstance方法的区别分享
-
iOS开发中class和#import的区别介绍
-
深入分析C#中处理和键盘相关事件的详解