前端的知识点真多(还不是JavaScript基础不好惹的“祸”啊,?),不过没关系,不怕它多,来一个我记一个,你能拿我怎么办,呵呵。
最近这几天都在写一个类似微博哪种说说的页面,但是想在WordPress上实现,还是折腾了蛮久,只能安慰自己慢工出细活了,目前是基本完工了,到时候会写文章说下。
写的时候,就遇到了一关于JavaScript中的事件捕获到的e.target
和e.currentTarget
的问题,不知道这两个有啥区别,平常用到的较多的是e.target
也基本能满足功能,而e.currentTarget
不能说不熟悉嘛,起码都有见过,不过是没咋用它,所以今天就拿例子说话,这样好理解(什么呀,搞的理论自己很懂似的,还不是通过看例子搞懂了)
<!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>e.target和e.currentTarget区别</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> document.querySelector('ul').addEventListener('click', e => { console.log(e.target); //当前点击啥元素就输出啥元素 console.log(e.currentTarget); //绑定事件写的是啥元素就输出啥元素,这个例子就是ul }); </script> </body> </html>
感觉上完代码案例后(注释里头该说的都说了),就没啥好说的,不懂的话,就拿案例代码复制后跑下应该是可以懂了吧。