js this详解，事件的三种绑定方式

this，当前触发事件的标签

在绑定事件中的三种用法：
　　a. 直接HTML中的标签里绑定 onclick="fun1()";
　　b. 先获取Dom对象，然后利用dom对象在js里绑定;
　　　　document.getElementById('xx').onclick
　　　　document.getElementById('xx').onfocus

　　c. w3c 规定中的addElementListener

a. 第一种绑定方式 dom 0
<input id='i1' type='button' onclick='ClickOn(this)'>

　　function ClickOn(self){

　　　　self.style.width="200px";
　　　　// self 当前点击的标签
　　}

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hide{
             display: none;
         }
         .item .header{
             background-color: #2459a2;
             color: white;
             height: 35px;
             line-height:35px;
         }
     </style>
 </head>
 <body>
 <div style="height: 48px;"></div>
 <div id="i1" style="width: 300px;">
     <div class="item">
         <div onclick="menu(this)" class="header">菜单1</div>
         <div class="content hide">
             <div>内容1</div>
             <div>内容2</div>
             <div>内容3</div>
         </div>
     </div>
     <div class="item">
         <div onclick="menu(this)" class="header">菜单2</div>
         <div class="content hide">
             <div>内容1</div>
             <div>内容2</div>
             <div>内容3</div>
         </div>
     </div>
     <div class="item">
         <div onclick="menu(this)" class="header">菜单3</div>
         <div class="content hide">
             <div>内容1</div>
             <div>内容2</div>
             <div>内容3</div>
         </div>
     </div>
 </div>
 <script type="application/javascript">
     function menu(nid) {
         var tag = nid.parentElement;
         console.log(tag.parentElement.parentElement);
         for (var i=0;i<tag.parentElement.children.length;i++) {
             tag.parentElement.children[i].children[1].classList.add('hide');
         }
         tag.children[1].classList.remove('hide');
     }

 </script>
 </body>
 </html>

b. 第二种绑定方式 dom 1
<input id='i1' type='button' >
　　document.getElementById('i1').onclick = function(){

　　　　this.style.width="200px";
　　　　// this 代指当前点击的标签
　　}

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hide{
             display: none;
         }
         .item .header{
             background-color: #2459a2;
             color: white;
             height: 35px;
             line-height:35px;
         }
     </style>
 </head>
 <body>
 <div style="height: 48px;"></div>
 <div id="i1" style="width: 300px;">
     <div class="item">
         <div class="header">菜单1</div>
         <div class="content hide">
             <div>内容1</div>
             <div>内容2</div>
             <div>内容3</div>
         </div>
     </div>
     <div class="item">
         <div class="header">菜单2</div>
         <div class="content hide">
             <div>内容1</div>
             <div>内容2</div>
             <div>内容3</div>
         </div>
     </div>
     <div class="item">
         <div class="header">菜单3</div>
         <div class="content hide">
             <div>内容1</div>
             <div>内容2</div>
             <div>内容3</div>
         </div>
     </div>
 </div>
 <script type="application/javascript">
     var tag = document.getElementById('i1');
     for (var i=0;i<tag.children.length;i++){
         tag.children[i].onclick = function () {
             for(var i=0;i<tag.children.length;i++){
                 tag.children[i].children[1].classList.add('hide');
             }
             this.children[1].classList.remove('hide');
         }
     }
 </script>
 </body>
 </html>

c. 第三种绑定方式 dom 2

　　obj.addElementListener("事件","匿名函数",true/false);  true/false可以省略，默认是false冒泡模式，true为捕捉模式，他们的作用是当有一个事件可以有多个标签响应时，响应的顺序

　　false 先从最内侧的子标签响应，true则刚发相反。

　　

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <style>
     #main {
         background-color: red;
         width: 300px;
         height: 400px;
     }
     #content {
         background-color: deeppink;
         width: 150px;
         height: 200px;
     }
 </style>
 </head>
 <body>
 <div id="main">
     <div id="content"></div>
 </div>
 <script>
     var mymain = document.getElementById('main');
     var mycontent = document.getElementById('content');
     //mymain.addEventListener("click",function(){console.log('main1')});
     //mymain.addEventListener("click",function(){console.log('main2')});  //可以同时执行多个函数
     mymain.addEventListener("click",function(){console.log('main')},true);
     mycontent.addEventListener("click",function(){console.log('content')},true);
 </script>
 </body>
 </html>