js this详解，事件的三种绑定方式
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详解，事件的三种绑定方式的更多相关文章
- Dom事件的三种绑定方式
1.事件 2. onclick, onblur, onfocus, 需求:请写出一个行为,样式,结构,相分离的页面. JS, CSS, HTML, 示例1,行为结构样式粘到一起的页面: & ...
- v-bind绑定属性样式——class的三种绑定方式
1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...
- 手把手教你实现三种绑定方式（call、apply、bind）
关于绑定首先要说下this的指向问题. 我们都知道: 函数调用时this指向window 对象调用函数时this指向对象本身 看下面得例子: // 1 function test(){ const n ...
- js&jquery：添加事件的三种方法和常用的一些事件
一.添加事件的方法 1.EventTarget.addEventListener添加 获取事件目标元素,通过addEventListener函数添加 // Assuming myButton is a ...
- python selenium 三种等待方式详解[转]
python selenium 三种等待方式详解 引言: 当你觉得你的定位没有问题,但是却直接报了元素不可见,那你就可以考虑是不是因为程序运行太快或者页面加载太慢造成了元素不可见,那就必须要加等待 ...
- C++的三种继承方式详解以及区别
目录 目录 C++的三种继承方式详解以及区别 前言 一.public继承 二.protected继承 三.private继承 四.三者区别 五.总结 后话 C++的三种继承方式详解以及区别 前言 我发 ...
- EF三种编程方式图文详解
Entity Framework4.1之前EF支持“Database First”和“Model First”编程方式,从EF4.1开始EF开始支持支持“Code First”编程方式,今天简单看一下 ...
- js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...
- 为什么说JAVA中要慎重使用继承 C# 语言历史版本特性（C# 1.0到C# 8.0汇总） SQL Server事务 事务日志 SQL Server 锁详解 软件架构之 23种设计模式 Oracle与Sqlserver：Order by NULL值介绍 asp.net MVC漏油配置总结
为什么说JAVA中要慎重使用继承 这篇文章的主题并非鼓励不使用继承,而是仅从使用继承带来的问题出发,讨论继承机制不太好的地方,从而在使用时慎重选择,避开可能遇到的坑. JAVA中使用到继承就会有两 ...
随机推荐
- 【Python】unittest-1
一.Unittest 单元测试 将测试结果和期望值作对比 (1) 继承 (2) 引用包 (3) 执行一次test就会调用一次setup和tearDown (4) ...
- SQL注入之Sqli-labs系列第十七关（UPDATA– 基于错误– 单引号– 字符型）
开始挑战第十七关(Update Query- Error based - String) 首先介绍下update的用法: 作用:Update 语句用于修改表中的数据. 语法:UPDATE 表名称SET ...
- Django之模型层-单表操作
单表操作 添加记录 方式1 # 先实例化models中的对象,按照定义的语句规则传入参数,然后使用对象调用save()保存到数据库 book_obj = Book(id=1,title='python ...
- JsonWebToken
概述 如果各位不了解 JWT,不要紧张,它并不可怕. JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 让我们来假想一下一个 ...
- 一种安装openslide的简易方法
直接百度谷歌搜索可能需要手动编译安装,能不能用通过一两句命令行的方式安装openslide?网上给出的教程确实都是通过源安装python-openslide,实际上这样安装,即使安装很多依赖库之后仍然 ...
- Unity 3D与Android Studio安卓交互之-导出jar包
u3d与安卓 jar 包交互 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...
- Redis（三）源source编译
背景: 自己电脑是win7 32bit的,而想要Redis4.0的版本,但是在网上没找到,所以自己干脆download源source,自己build,安装. 最后,目前达到的状态是,windows下s ...
- docker安装linux系统镜像
推荐镜像 Centos/Debian/UbuntuCentOS:kinogmt/centos-ssh (默认用户名root,密码password,CentOS6.7)CentOS:tutum/cent ...
- ios-计算时间方法
-(NSString *)countPublishTime:(NSString *)sDate { NSDate *dtNow = [NSDate date]; NSDateFormatter *da ...
- buckaroo 试用
我系统是mac 所以选择的是mac 的版本,官方是支持跨平台的. 安装 mac 版本安装 wget https://github.com/LoopPerfect/buckaroo/releases/d ...