首页 > Web开发 > 详细

js this详解

时间:2018-08-10 23:57:55      阅读:261      评论:0      收藏:0      [点我收藏+]

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详解

原文:https://www.cnblogs.com/alex-hrg/p/9457568.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!