currentTarget 指向的是监听器直接绑定的那个元素，而 target 是事件源目标元素。在事件处理程序内部，对象this始终等于 currentTarget 的值。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js中target和currentTarget</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 方式一：我们先在在ul上绑定事件 此时鼠标操作点击在第三个li上 var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function(e) { console.log(e.currentTarget); // <ul> <li>1</li> <li>2</li> <li>3</li> </ul> console.log(e.target); // <li>3</li> console.log(this); // ul DOM节点 console.log(this === e.target); // click事件真正的目标 返回false console.log(this === e.currentTarget); //在事件处理程序内部，对象this始终等于currentTarget的值 返回ture } // 方式二：然后在第一个li上绑定事件 此时鼠标操作点击在第一个li上 /*var li = document.getElementsByTagName('li')[0]; li.onclick = function(e) { console.log(e.currentTarget); // <li>1</li> console.log(e.target); // <li>1</li> console.log(this); // ul DOM节点 console.log(this === e.target); // click事件真正的目标 返回true console.log(this === e.currentTarget); //在事件处理程序内部，对象this始终等于currentTarget的值 返回ture }*/ </script> </body> </html> |
从上面操作可以看出：
1. currentTarget 指向的是监听器直接绑定的那个元素，而 target 是实际触发事件(事件源)元素；
2. 事件内部的this就是绑定事件的那个DOM；
3. 事件处理程序内部，对象 this 始终等于 currentTarget 的值；
这个一般用到事件委托上，真正触发事件的dom是target，可以将事件委托到currentTarget上。
我的微信
扫一扫加我微信
