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 当前点击的标签
}
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=" 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. 第二种绑定方式 dom 1
<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=" 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>
c. 第三种绑定方式 dom 2
obj.addElementListener("事件","匿名函数",true/false); true/false可以省略，默认是false冒泡模式，true为捕捉模式，他们的作用是当有一个事件可以有多个标签响应时，响应的顺序
false 先从最内侧的子标签响应，true则刚发相反。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main { 8 background-color: red; 9 width: 300px; 10 height: 400px; 11 } 12 #content { 13 background-color: deeppink; 14 width: 150px; 15 height: 200px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="main"> 21 <div id="content"></div> 22 </div> 23 <script> 24 var mymain = document.getElementById('main'); 25 var mycontent = document.getElementById('content'); 26 //mymain.addEventListener("click",function(){console.log('main1')}); 27 //mymain.addEventListener("click",function(){console.log('main2')}); //可以同时执行多个函数 28 mymain.addEventListener("click",function(){console.log('main')},true); 29 mycontent.addEventListener("click",function(){console.log('content')},true); 30 </script> 31 </body> 32 </html>