this，当前触发事件的标签
在绑定事件中的两种用法：
??????????? a. 直接HTML中的标签里绑定 onclick="fun1()";
??????????? b. 先获取Dom对象，然后利用dom对象在js里绑定;
??????????????? document.getElementById(‘xx‘).onclick
??????????????? document.getElementById(‘xx‘).onfocus
???????????a. 第一种绑定方式
???????????????<input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(this)‘>
???????????????
??????????????? function ClickOn(self){
self.style.width="200px";
??????????????????? // self 当前点击的标签
??????????????? }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.hide{ 8 ????????????display: none; 9 ????????}10 ????????.item .header{11 ????????????background-color: #2459a2;12 ????????????color: white;13 ????????????height: 35px;14 ????????????line-height:35px;15 ????????}16 ????</style>17 </head>18 <body>19 <div style="height: 48px;"></div>20 <div id="i1" style="width: 300px;">21 ????<div class="item">22 ????????<div onclick="menu(this)" class="header">菜单1</div>23 ????????<div class="content hide">24 ????????????<div>内容1</div>25 ????????????<div>内容2</div>26 ????????????<div>内容3</div>27 ????????</div>28 ????</div>29 ????<div class="item">30 ????????<div onclick="menu(this)" class="header">菜单2</div>31 ????????<div class="content hide">32 ????????????<div>内容1</div>33 ????????????<div>内容2</div>34 ????????????<div>内容3</div>35 ????????</div>36 ????</div>37 ????<div class="item">38 ????????<div onclick="menu(this)" class="header">菜单3</div>39 ????????<div class="content hide">40 ????????????<div>内容1</div>41 ????????????<div>内容2</div>42 ????????????<div>内容3</div>43 ????????</div>44 ????</div>45 </div>46 <script type="application/javascript">47 ????function menu(nid) {48 ????????var tag = nid.parentElement;49 ????????console.log(tag.parentElement.parentElement);50 ????????for (var i=0;i<tag.parentElement.children.length;i++) {51 ????????????tag.parentElement.children[i].children[1].classList.add(‘hide‘);52 ????????}53 ????????tag.children[1].classList.remove(‘hide‘);54 ????}55 56 </script>57 </body>58 </html> ???????????b. 第二种绑定方式
???????????????<input id=‘i1‘ type=‘button‘ >
??????????????? document.getElementById(‘i1‘).onclick = function(){
this.style.width="200px";
??????????????????? // this 代指当前点击的标签
??????????????? }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.hide{ 8 ????????????display: none; 9 ????????}10 ????????.item .header{11 ????????????background-color: #2459a2;12 ????????????color: white;13 ????????????height: 35px;14 ????????????line-height:35px;15 ????????}16 ????</style>17 </head>18 <body>19 <div style="height: 48px;"></div>20 <div id="i1" style="width: 300px;">21 ????<div class="item">22 ????????<div class="header">菜单1</div>23 ????????<div class="content hide">24 ????????????<div>内容1</div>25 ????????????<div>内容2</div>26 ????????????<div>内容3</div>27 ????????</div>28 ????</div>29 ????<div class="item">30 ????????<div class="header">菜单2</div>31 ????????<div class="content hide">32 ????????????<div>内容1</div>33 ????????????<div>内容2</div>34 ????????????<div>内容3</div>35 ????????</div>36 ????</div>37 ????<div class="item">38 ????????<div class="header">菜单3</div>39 ????????<div class="content hide">40 ????????????<div>内容1</div>41 ????????????<div>内容2</div>42 ????????????<div>内容3</div>43 ????????</div>44 ????</div>45 </div>46 <script type="application/javascript">47 ????var tag = document.getElementById(‘i1‘);48 ????for (var i=0;i<tag.children.length;i++){49 ????????tag.children[i].onclick = function () {50 ????????????for(var i=0;i<tag.children.length;i++){51 ????????????????tag.children[i].children[1].classList.add(‘hide‘);52 ????????????}53 ????????????this.children[1].classList.remove(‘hide‘);54 ????????}55 ????}56 </script>57 </body>58 </html>js this详解
原文地址：https://www.cnblogs.com/alex-hrg/p/9457568.html