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 当前点击的标签
　　}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .item .header{

             background-color: #2459a2;

             color: white;

             height: 35px;

             line-height:35px;

         }

     </style>

 </head>

 <body>

 <div style="height: 48px;"></div>

 <div id="i1" style="width: 300px;">

     <div class="item">

         <div onclick="menu(this)" class="header">菜单1</div>

         <div class="content hide">

             <div>内容1</div>

             <div>内容2</div>

             <div>内容3</div>

         </div>

     </div>

     <div class="item">

         <div onclick="menu(this)" class="header">菜单2</div>

         <div class="content hide">

             <div>内容1</div>

             <div>内容2</div>

             <div>内容3</div>

         </div>

     </div>

     <div class="item">

         <div onclick="menu(this)" class="header">菜单3</div>

         <div class="content hide">

             <div>内容1</div>

             <div>内容2</div>

             <div>内容3</div>

         </div>

     </div>

 </div>

 <script type="application/javascript">

     function menu(nid) {

         var tag = nid.parentElement;

         console.log(tag.parentElement.parentElement);

         for (var i=0;i<tag.parentElement.children.length;i++) {

             tag.parentElement.children[i].children[1].classList.add('hide');

         }

         tag.children[1].classList.remove('hide');

     }

 </script>

 </body>

 </html>

b. 第二种绑定方式 dom 1
<input id='i1' type='button' >
　　document.getElementById('i1').onclick = function(){

　　　　this.style.width="200px";
　　　　// this 代指当前点击的标签
　　}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .item .header{

             background-color: #2459a2;

             color: white;

             height: 35px;

             line-height:35px;

         }

     </style>

 </head>

 <body>

 <div style="height: 48px;"></div>

 <div id="i1" style="width: 300px;">

     <div class="item">

         <div class="header">菜单1</div>

         <div class="content hide">

             <div>内容1</div>

             <div>内容2</div>

             <div>内容3</div>

         </div>

     </div>

     <div class="item">

         <div class="header">菜单2</div>

         <div class="content hide">

             <div>内容1</div>

             <div>内容2</div>

             <div>内容3</div>

         </div>

     </div>

     <div class="item">

         <div class="header">菜单3</div>

         <div class="content hide">

             <div>内容1</div>

             <div>内容2</div>

             <div>内容3</div>

         </div>

     </div>

 </div>

 <script type="application/javascript">

     var tag = document.getElementById('i1');

     for (var i=0;i<tag.children.length;i++){

         tag.children[i].onclick = function () {

             for(var i=0;i<tag.children.length;i++){

                 tag.children[i].children[1].classList.add('hide');

             }

             this.children[1].classList.remove('hide');

         }

     }

 </script>

 </body>

 </html>

c. 第三种绑定方式 dom 2

　　obj.addElementListener("事件","匿名函数",true/false);  true/false可以省略，默认是false冒泡模式，true为捕捉模式，他们的作用是当有一个事件可以有多个标签响应时，响应的顺序

　　false 先从最内侧的子标签响应，true则刚发相反。

　　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 <style>

     #main {

         background-color: red;

         width: 300px;

         height: 400px;

     }

     #content {

         background-color: deeppink;

         width: 150px;

         height: 200px;

     }

 </style>

 </head>

 <body>

 <div id="main">

     <div id="content"></div>

 </div>

 <script>

     var mymain = document.getElementById('main');

     var mycontent = document.getElementById('content');

     //mymain.addEventListener("click",function(){console.log('main1')});

     //mymain.addEventListener("click",function(){console.log('main2')});  //可以同时执行多个函数

     mymain.addEventListener("click",function(){console.log('main')},true);

     mycontent.addEventListener("click",function(){console.log('content')},true);

 </script>

 </body>

 </html>

js this详解，事件的三种绑定方式的更多相关文章

  1. Dom事件的三种绑定方式

    1.事件 2.  onclick, onblur, onfocus, 需求:请写出一个行为,样式,结构,相分离的页面.   JS,   CSS,  HTML, 示例1,行为结构样式粘到一起的页面: & ...

  2. v-bind绑定属性样式——class的三种绑定方式

    1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...

  3. 手把手教你实现三种绑定方式（call、apply、bind）

    关于绑定首先要说下this的指向问题. 我们都知道: 函数调用时this指向window 对象调用函数时this指向对象本身 看下面得例子: // 1 function test(){ const n ...

  4. js&jquery：添加事件的三种方法和常用的一些事件

    一.添加事件的方法 1.EventTarget.addEventListener添加 获取事件目标元素,通过addEventListener函数添加 // Assuming myButton is a ...

  5. python selenium 三种等待方式详解[转]

    python selenium 三种等待方式详解   引言: 当你觉得你的定位没有问题,但是却直接报了元素不可见,那你就可以考虑是不是因为程序运行太快或者页面加载太慢造成了元素不可见,那就必须要加等待 ...

  6. C++的三种继承方式详解以及区别

    目录 目录 C++的三种继承方式详解以及区别 前言 一.public继承 二.protected继承 三.private继承 四.三者区别 五.总结 后话 C++的三种继承方式详解以及区别 前言 我发 ...

  7. EF三种编程方式图文详解

    Entity Framework4.1之前EF支持“Database First”和“Model First”编程方式,从EF4.1开始EF开始支持支持“Code First”编程方式,今天简单看一下 ...

  8. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  9. 为什么说JAVA中要慎重使用继承 C# 语言历史版本特性（C# 1.0到C# 8.0汇总） SQL Server事务 事务日志 SQL Server 锁详解 软件架构之 23种设计模式 Oracle与Sqlserver：Order by NULL值介绍 asp.net MVC漏油配置总结

    为什么说JAVA中要慎重使用继承   这篇文章的主题并非鼓励不使用继承,而是仅从使用继承带来的问题出发,讨论继承机制不太好的地方,从而在使用时慎重选择,避开可能遇到的坑. JAVA中使用到继承就会有两 ...

随机推荐

  1. MySQL：日期函数、时间函数处理（转）

    date_add() 增加MYSQL 获取当前时间加上一个月 ; date_sub()减少 date_sub('1998-01-01 00:00:00', interval '1 1:1:1' day ...

  2. CPU 架构 —— ARM 架构

    linux 系统查看 CPU 架构命令: $ arch armv7l $ uname -m armv7l # -m:--machine # 进一步查看处理器信息 $ cat /proc/cpuinfo ...

  3. 2018上C语言程序设计（高级）作业- 第3次作业

    作业要求一 6-1 输出月份英文名 6-2 查找星期 6-3 计算最长的字符串长度 6-4指定位置输出字符串 6-5奇数值结点链表 6-6学生成绩链表处理 6-7链表拼接 作业要求二 题目6-1输出月 ...

  4. useradd密码无效

    /********************************************************************** * useradd密码无效 * 说明: * 在测试Ubu ...

  5. Mac电脑使用：您的安全性偏好设置仅允许安装来自App Store和被认可的开发者的应用（解决方法）

    在10ms加速器上下载了MAC客户端ShadowsocksX,打开软件,提示打不开,因为来自身份不明的开发者. 以下为解决办法: Step1:打开dock栏里面的“系统偏好设置” Step2:在系统偏 ...

  6. Windows 清理磁盘

    ====手动清理C盘(开始\运行\cleanmgr,选择C盘...)或者如下右键C盘,选择属性,点击通用页签下方[磁盘清理]按钮.磁盘清理界面,中间部分可以选择要清理的项目,可以全选.然后点击下方的清 ...

  7. （9）模板层 - templates（模板语言、语法、取值、过滤器、变量的使用）

    django的模板语言:DTL 模板语言的变量传入 这个是标签 {{ 变量名 }} {{ 变量名 }}   #模板语言的替换可以在模板中的任意位置生效 PS:通过 . 可以做深度查询 模板语言的过滤器 ...

  8. while与do/while循环

    while循环1.格式:初始化条件while(循环条件){循环体迭代条件}题目:100以内偶数的输出及其和(while语句) public class V{ public static void ma ...

  9. ★ MYSQL隔离级别 通俗理解 + mysql、oracle默认事务隔离级别

    ★  脏读 : 读取了前一事务 未提交 的数据 ; 不可重复读    : 读取了前一事务     提交 的数据: ★ 幻读 与 不可重复读 common :都是读取了另一条已经提交的事务(这点与脏读不 ...

  10. CentOS下如何根据Dump文件分析线上问题

    https://blog.csdn.net/lixin03080/article/details/79711296 一.保存现场 1.记录系统整体资源使用情况,进程信息.线程信息 top -b -n ...