js this詳解，事件的三種綁定方式

時間 2019-11-19

原文原文鏈接

this，當前觸發事件的標籤javascript

在綁定事件中的三種用法：
　　a. 直接HTML中的標籤裏綁定 onclick="fun1()";
　　b. 先獲取Dom對象，而後利用dom對象在js裏綁定;
　　　　document.getElementById('xx').onclick
　　　　document.getElementById('xx').onfocushtml

　　c. w3c 規定中的addElementListener

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

　　function ClickOn(self){java

　　　　self.style.width="200px";
　　　　// self 當前點擊的標籤
　　}app

 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. 第二種綁定方式 dom 1
<input id='i1' type='button' >
　　document.getElementById('i1').onclick = function(){dom

　　　　this.style.width="200px";
　　　　// this 代指當前點擊的標籤
　　}ide

 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

c. 第三種綁定方式 dom 2函數

　　obj.addElementListener("事件","匿名函數",true/false); true/false能夠省略，默認是false冒泡模式，true爲捕捉模式，他們的做用是當有一個事件能夠有多個標籤響應時，響應的順序this

　　false 先從最內側的子標籤響應，true則剛發相反。spa

 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>