js this详解

Posted 2021-01-02 alex-hrg

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js this详解相关的知识，希望对你有一定的参考价值。

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>

View Code

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详解的主要内容，如果未能解决你的问题，请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

详解JavaScript中的this

详解JS中定时器setInterval和setTImeout的this指向问题

Selenium JavascriptExecutor 详解

sublime text 3 添加代码片段