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>