js this詳解
阿新 • • 發佈：2018-08-11
type 綁定 方式 .get title lang length con tle 
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; 9View Code} 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>View Code
js this詳解