一、JavaScript介绍
前端三剑客之JavaScript，简称js，可能是这三个里面最难的一个了。很早以前，市面上流通着三种js版本，为了统一，ECMA（欧洲计算机制造协会）定义了规范的版本，即EcmaScript。
事实上ECMAScript只是JavaScript的一部分，完整的JavaScript是由以下三个部分组成的：
核心（ECMAScript）
文档对象模型（DOM）Document object model
浏览器对象模型（BOM）Broswer object model
与html和css相比，js是一门成熟的编程语言，而且是前端唯一的一门编程语言。js的很多代码结构和Java相似，但是在语法上又没有很强制的要求，在使用中你会慢慢发现，这个东西很难会报错。既然是一门编程语言，就要从变量，数据类型，运算符，流程控制语句，函数（并不是所有的语言都有函数的概念），类和对象（js没有“类”）这些方面来入手学习。
二、ECMAScript（核心）
首先，js的注释和Java一样
//单行注释
/*多行注释*/
js的代码段是用大括号分割的，语句与语句之间用分号隔开,没有分号的话默认以换行符为分隔符。
1.变量
（1）声明变量时有var关键字，不用var关键字的话是全局变量，除非有需要，否则不建议用全局变量，会拖慢效率；
（2）变量要先声明，再定义，
var i;
i=10;
或者简写成var i=10;（一般都这样处理）
（3）js还支持一行声明多个变量，并且可以是不同类型
var i=10,j="zhang";
（4）如果声明一个变量x,却不给他赋值，打印的时候竟然也不报错，而是打印undefined
（5）变量的命名规范，这并不是某一种语言特有的，只要是变量，就会涉及这个问题，推荐一个匈牙利类型标记法：在变量名前加一个小写字母说明该变量的类型，后面的名字用驼峰命名法。
（6）变量命名：首字母必须是字母、下划线或者$三个中的一个，其余的可以是下划线、美元符号或者任何字母，数字。要避开关键字：
2.数据类型
js中没有print，我们可以用alert（弹窗）或者console.log()（在浏览器的控制台打印）打印我们想要的结果
查看数据类型用typeof命令
var x=10; console.log(typeof(x));
（1）js中有的数据类型有：
基本数据类型：Number（数值），String（字符串），Boolean（布尔值），Null，Undefined
引用数据类型：object
js中并没有列表，元组，字典这种数据类型，列表和元组是以数组对象实现的
（2）Number（数字类型）
不区分整型和浮点型；
（3）String（字符串类型）
由unicode字符、数字和标点符号组成的序列，特殊字符要加上反斜杠转义。
（4）Boolean（布尔类型）
布尔类型仅有两个值，true和false，在实际运算中，true=1，false=0
这个用在if判断语句后面，事实上if语句后面可以是任意数据类型，只要有布尔值就行了，这一点js和python一样，但是其他语言中，if后面必须是表达式
（5）null和undefined类型
undefined类型只有一个值，就是undefined，当函数没有明确返回值，或者声明的变量没有初识化的时候，就会产生这个值。
而null常出现在找不到对象的时候。
3.运算符
js中的运算符和python中基本一样，说一说不一样的几个：
（1）i++和++i
这个学过c++的一定知道，没什么可说的，应该是为了考试才出的这种东西吧
i++是先赋值再计算
++i是先计算再赋值
（2）"==="
首先在python中，如果这样一条语句
print(2=="2")
打印的结果一定是false，这是因为Python是一门强类型语言，不会自动转换变量的类型，但是，js是一种弱类型语言，在js中打印这个语句，结果会是true，因为js自动把数值类型的2转换成字符串类型的“2”，那么问题就来了，如果在js中，就是判断类型是否一样，不要自动转换，就用到了这个运算符“===”
在js的number类型中，还要一种数据类型是NaN类型，这是当遇到字符串转换成数字无效时得到的结果。比如：
var s="hello"; var ret2=+s; console.log(ret2)
这样就会得到一个NaN
4.流程控制
（1）if条件语句
与Python不同的是，js中没有elif这种写法，多分支只能用else if
if (表达式){ 执行语句 } else if(表达式){ 执行语句 } else{ 执行语句 }
（2）switch-case语句
switch (表达式){ case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; }
注意：值1，值2。。。。这些是确定的值，default是上述值都不是表达式的值的时候执行的语句；
这个break是必要的，如果没有break，这些语句将都会执行
（3）while循环和for循环
while循环和Python一样，有三个要素：初始变量，判断条件，变量自加。就不多说了
说一下for循环
for循环方式一：条件循环（最常用）
for(var i=0;i<10;i++){ console.log("i") }
for循环方式二：遍历循环
var arr=["a","b","c"]; for (var i in arr){ console.log(i) }
这个结果打印的是索引值0,1,2
想取到数组里的值，可以用arr[i],关于数组对象，一会儿会专门说
这是数组，js中没有字典这种数据类型，但是有一种类似的写法和用法
var info={"a":123,"b":234,"c":345}; for (var i in info){ console.log(i) }
这种情况下，拿到的i就是“字典”中的“key”:a,b,c,取值同样是info[i]
5.对象
在我们学习了面向对象之后，应该有这种思想，见到“对象”这两个字，就马上想到对象有属性和方法。
（1）字符串对象
创建方式有两种：
变量=“字符串”； var str1="hello world"
字符串对象名称=new String（字符串） var str1=new String("hello world")
字符串对象就一个属性，length属性
方法：s为字符串对象
s.toLowerCase() -----转成小写
s.toUpperCase() -----转成大写
s.trim() ------去除字符串两边空格
s.charAt() ------获取指定位置字符，括号里为要获取的字符索引
s.indexOf() -------查询指定字符的索引位置，括号里为要查找的字符
s.lastIndexOf() -------跟上面这条功能一样，但是是反着找
s.match() -------返回匹配字符串的数组，没有匹配到返回null
s.seach() -------返回匹配到的字符串首字符的位置索引，匹配不到返回-1
s.substr(start,length) 截取指定长度字符串，start是开始位置的索引值，length表示长度
s.substring(start,end) 截取字符串，start是开始位置索引，end是结束位置索引，取之间的字符串
s.slice(start,end) 切片字符串
s.replace(oldstr,newstr) 替换字符串，（旧的，新的）
s.split() 分割字符串，结果放到一个数组中
s.concat(addstr) 拼接字符串，括号里为要拼接的字符串
演示：
s="hello"; console.log(s.toLowerCase()); //hello console.log(s.toUpperCase()); //HELLO console.log(s.charAt(2)); //l console.log(s.indexOf("o")); //4 console.log(s.lastIndexOf("o")); //4 console.log(s.match("lo")); //[object Array]["lo"] console.log(s.match("lol")); //null console.log(s.search("lo")); //3 console.log(s.search("lol")); //-1 console.log(s.substr(1,3)); //ell console.log(s.substring(1,3)); //el console.log(s.slice(1,3)) ; //el console.log(s.replace("ell","o")) ; //hoo console.log(s.split("e")) ; //[object Array]["h", "llo"] console.log(s.concat("world")) ; //helloworld
（2）数组对象（array对象）
创建数组的三种方式：
- var arr=[1,2,3];
- var arr=new Array[1,2,3];
- var arr=new Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;
还可以创建二维数组，类似一个列表，arr[ ] [ ]，第一个索引为行，第二个索引为列
join方法：
在Python中的join方法的用法是这样的：
s1="hello" s2="world" s3="-".join([s1,s2]) print(s3) #hello-world
在js的数组中正好反过来，
console.log(["hello","world"].join("-")) //hello-world
reverse方法和sort方法：
都是对数组进行排序的，reverse是颠倒顺序，sort是按首字母的ascii码表位置排序
slice方法：
对数组进行切片操作，参数为开始位置和结束位置的索引值
splice方法：
删除子数组，有几个参数
arr.splice(start,deleteCount,value)
start代表开始位置（从开始位置后面开始删），deleteCount 表示删除数组元素的个数，value 表示在删除位置插入的数组元素（可省略）
push和pop方法：
在数组的最后添加和删除元素
unshift和shift方法：
在数组开始位置添加和删除元素
（3）时间对象
创建时间对象：var timer = new Date()
获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜) //设置日期和时间 //setDate(day_of_month) 设置日 //setMonth (month) 设置月 //setFullYear (year) 设置年 //setHours (hour) 设置小时 //setMinutes (minute) 设置分钟 //setSeconds (second) 设置秒 //setMillliseconds (ms) 设置毫秒(0-999) //setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12点23分50秒
（4）math对象，就是把内置函数封装到math对象中，使用时需要用Math来调用方法
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x)对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。
（5）函数对象（重点）
//定义一个函数 function 函数名(参数) { 函数体 } //调用函数 函数名()
注意：js中函数的调用可以在定义之前，这点和Python不同，Python是一行一行的执行，而js是先编译一遍，再去执行
关于函数的参数：
在函数内部有一个arguments对象，这个对象里包含了函数调用时传的参数
function add() { console.log(arguments); var sum=0; for (var i=0;i<arguments.length;i++){ sum+=arguments[i] ; } console.log(sum); } add(1,2,3,5,7); //[object Arguments]{0: 1, 1: 2, 2: 3, 3: 5, 4: 7, length: 5} //18
js中也有匿名函数，在后面事件绑定的时候会经常用到
三、BOM对象（浏览器对象）
1.windows对象
在浏览器中，每个打开的网页是一个窗口，有三种方法实现弹出框：
（1）alert(123) 在窗口中弹出“123”，点击确定消失
（2）var ret=confirm('zhang');
console.log(ret); 在窗口中弹出“zhang“，有确定和取消两个按钮，点击确定，会在后台返回一个true，点击取消，会返回一个false
（3）var ret=prompt("input a number") 在窗口弹出一个输入框，同样可以通过一个变量来接收用户输入的内容
2.setInterval() 和 clearInterval()
setInterval()是按照指定的时间周期（毫秒为单位）来连续调用函数或者计算表达式，第一个参数为函数，第二个参数为时间间隔
clearInterval()是取消由setInterval()设置的操作，这个的参数为setInterval()的返回值
示例：在一个input框右面有两个按钮，点击开始就在框中每隔1秒中打印一次当前时间，点击停止就停止刷新
<body>
<input type="text">
<button class="start">开始</button>
<button class="end">停止</button>
<script>
ele_start=document.getElementsByClassName("start")[0];//开始按钮
ele_end=document.getElementsByClassName("end")[0]; //停止按钮
function foo() {
var timer=new Date().toString();
var ele=document.getElementsByTagName("input")[0];
ele.value=timer.slice(4,25);//是框内显示最适合查看代码效果的部分
}
var ID;//定义一个全局变量，用于接收返回值
ele_start.onclick=function () {
if (ID==undefined){ //为了解决第二次点击开始的时候，代码不执行的bug
foo(); //为了实现一点击开始，马上就能出现时间的效果
ID=setInterval(foo,1000);
}
}
ele_end.onclick = function () {
clearInterval(ID);
ID=undefined; //清除定时器后再给id重新赋值
}
</script>
</body>
3.setTimeout() 和 clearTimeout()
这个是在指定的时间后调用函数或计算表达式，用法和上面那两个一样。区别是这个只会执行一次。
四、DOM对象 这才是最大的重点
在DOM中，所有对象都是节点对象，其中
document对象是：整个html文档
element对象是指：html中的任何一个标签都是一个element对象
想要对标签执行操作需要两步：查找标签和操作标签
1.查找标签
（1）直接查找
document.getElementsByClassName("classname");//根据class查找标签
document.getElementsByTagName("elementname");//根据标签名查找标签
document.getElementById("idname"); //根据ID名查找标签
document.getElementsByName("name"); //根据name属性查找标签
这四种方法中，只有 document.getElementById("idname")是找到一个标签，其他三种都是找到多个，将结果放到一个数组中，可以通过索引分别取到
（2）通过节点属性查找
var ele=document.getElementsByClassName("start")[0]; ele.parentElement;// 查找父节点 ele.children; // 查找所有子标签 ele.firstElementChild; //查找第一个子标签元素 ele.lastElementChild; //查找最后一个子标签元素 ele.nextElementSibling; //查找下一个兄弟标签 ele.previousElementSibling;//查找上一个兄弟标签
需要注意的是，没有直接的属性可以查找到所有的兄弟标签，如果想在DOM中找到所有子标签，可以通过遍历 操作标签的父标签的所有子标签，然后用if条件判断排除当前操作标签的方法。
2.事件绑定的方式
方式一：
<body>
<div>
<button onclick="foo()">点击</button>
</div>
<script>
function foo() {
alert(123)
}
</script>
</body>
这种方式，js代码和html代码杂糅在一起，耦合性太强了
方式二：
<body>
<div>
<button>点击</button>
</div>
<script>
ele_button=document.getElementsByTagName("button")[0];
ele_button.onclick=function () {
alert(123)
}
</script>
</body>
但是这种方法会有一个问题：js代码会在页面出现的时候就已经加载完了，如果后面有新添加的标签，就不能绑定这个事件了，因为js代码已经加载过一遍，有几个绑定事件的标签就已经确定了，这个问题在jQuery中可以很方便解决，在DOM对象中，有两种解决办法可供参考：
1.把标签绑定的事件写到函数中，即第一种绑定事件的方式
2.在添加标签的代码中，再写一遍事件绑定函数
如果上面这点没看明白的话，可能你对查找到的标签是个数组这件事还不太明白，再写一个例子：
<body>
<div>
<button>添加</button>
<button>删除</button>
<button>编辑</button>
</div>
<script>
eles_button=document.getElementsByTagName("button");
//此时eles_button并不是一个标签了，而是有三个标签的集合
//给每个标签绑定事件就要通过循环遍历这个数组来拿到每个标签
for(var i=0;i<eles_button.length;i++){
eles_button[i].onclick=function () {
alert(123)
}
}
</script>
</body>
通过这个例子再说明上面的问题，在绑定事件的时候，找标签的过程就已经完成了，只找到了三个标签，但是我们新添加一个button后，代码不会再次重新刷新，所以新添加的这个button并没有绑定事件。
3.对标签操作
（1）对class操作
ele.classList.add("hide") //为标签添加class
ele.classList.remove("hide") //为标签移除class
练习：左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.left{
20%;
height: 800px;
background: grey;
float: left;
}
.right{
80%;
height:800px;
background: navajowhite;
float: left;
}
.title{
background: purple;
margin-top: 10px;
}
ul{
background: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单一</div>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="menu">
<div class="title">菜单二</div>
<ul class="hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="menu ">
<div class="title">菜单三</div>
<ul class="hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
<script>
// 查找标签
var eles_title=document.getElementsByClassName("title");
for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function () {
this.nextElementSibling.classList.remove("hide"); //this就是触发事件的标签
var eles_child=this.parentElement.parentElement.children;
for (var j=0;j<eles_child.length;j++){
if(eles_child[j].firstElementChild!=this) {
eles_child[j].lastElementChild.classList.add("hide")//添加hide属性，就把这个标签隐藏了
}
}
}
}
</script>
</body>
</html>
4.节点操作
ele.createElement() //创建一个节点,括号里是标签名 ele.removeChild() //父标签删除一个子节点，括号里是标签对象 ele.replaceChild() //替换标签，ele是父标签，括号里依次是旧的标签对象，新的标签对象 ele.appendChild() //父标签添加子标签
这里单独说一下复制标签：cloneNode
<script>
var ele_copy=document.getElementsByTagName("div")[0].cloneNode();//这种只是拷贝最外层的节点
var ele_copy=document.getElementsByTagName("div")[0].cloneNode(true);//这种才是完整的拷贝
这里有一个bug，如果被拷贝的对象有id属性，仍然可以拷贝，而且拷贝出来的对象也有这个id
还有一个问题，源标签的绑定事件不会被拷贝
</script>
5.获取标签中的文本
ele.innerText 和 ele.innerHTML
这是取值，赋值就是
ele.innerText="<a href='#'>click</a>"
ele.innerHTML="<a href='#'>click</a>"
innerText就是纯文本，但是innerHTML 会把拿到的元素当时一个标签（如果这个元素是一个标签）
6.属性值操作 attribute
我们平时取属性值的时候就直接用的 标签.属性
给属性赋值就是直接用的 标签.属性=“ ”
但是事实上，是有个attribute方法的
属性取值：ele.getAttribute(属性名)
属性赋值：ele.setAttribute(属性名)
删除属性：ele.removeAttribute(属性名)
7.DOM事件
onclick //点击标签 ondbclick //双击标签 onfocus //元素获得焦点 onblur //元素失去焦点 onchange //域的内容发生改变，常用于表单元素 onkeydown //键盘按键被按下 onkeypress //某个键盘按键被按下并松开。 onkeyup //某个键盘按键被松开。 onload //一张页面或一幅图像完成加载。 onmousedown //鼠标按钮被按下。 onmousemove //鼠标被移动。 onmouseout //鼠标从某元素移开。 onmouseover //鼠标移到某元素之上。 onmouseleave //鼠标从元素离开 onselect //文本被选中。 onsubmit //确认按钮被点击。
（1）onchange事件
通常用于表单标签，一个表格里的内容被改变时（我们选择一个选项时），触发事件
练习：省市二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<!--需求：两个表单，左边是省份，右边是城市，左边选择省份后，右边内容是对应的城市-->
<body>
<select name="" id="province">
<option value="">请选择省份</option>
<option value="">河北</option>
<option value="">山东</option>
</select>
<select name="" id="city">
<option value="" id="select_city">请选择城市</option>
</select>
</body>
<script>
var info={
"河北":["北京","衡水"],
"山东":["青岛","潍坊"]
};
// js中虽然没有字典的说法，但是有类似的用法。
var ele_pvn=document.getElementById("province");
var ele_city=document.getElementById("city");
var ele_select; //定义一个全局变量
ele_pvn.onchange=function () {
ele_city.options.length=1; //保留一项，后面的内容全部清除
for (var i in info){
if (i==(this.children[this.selectedIndex]).innerText){ //判断
// this.selectedIndex是取到选择内容的索引值
for(var j in info[i]){
//思路是每选择一个省份，就把后面城市里的内容全部清空，然后从“字典”中根据选择的省份，重新新建一个后面城市的标签
var city_option=document.createElement("option");
city_option.id="selected";
ele_select=document.getElementById("selected");
city_option.innerText=info[i][j];
ele_city.appendChild(city_option);
}
}
}
}
</script>
</html>
（2）onkeydown事件，用于input输入框
这个事件是按键盘上任意按键都会触发，这其实意义不大。如果想要指定按键，该怎么做？
这里用到一个event对象，event对象是保存事件触发状态的对象，由操作系统发送
ele.onkeydown=function (e) { e=e||window.event; //这句代码是为了避免出现某些浏览器的不兼容问题 console.log(e.keyCode);//这样会打印按键的ascii码 console.log(String.fromCharCode(e.keyCode))//这句代码可以把ascii码转换成字符 }
（3）onload事件
script中涉及到查找标签时，js代码必须写在html代码下面，否则会因为找不到标签而报错
但是如果就是想让js代码在上面，就用到onload事件
或者再说一个应用场景：浏览器加载图片实际上是和加载其他文本标签分开的，是新开了一个线程。有事网速不给力的时候，就会出错。这时就可以用到这个事件，让其他标签等待图片加载完才能操作
用法如下：
<script>
window.onload=function () {
var ele=document.getElementsByTagName("div")
ele.style.color="green";
}
</script>
（4）onsubmit事件
这个事件是给form表单用到，是在表单提交的时候触发。表单标签里面的那个submit标签，点击之后会刷新页面，同时把数据提交给后台服务器（如果action指定了地址），这是submit自己默认的事件，我们用onsubmit事件的意义就是要阻止submit的默认事件。比如在用户登录输入用户名密码的时候，前端可以先判断一下格式是否正确，如果格式都不正确，就没必要发送给后端了。
onsubmit事件一定是在submit事件之前触发的，否则就没意义了。
阻止submit默认事件的方法有两个：
1.return false
2.e.preventDefault()
练习：用户登录验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
div{
margin-top: 30px;
}
</style>
</head>
<body>
<form action="" class="form">
<div id="abd" ><input type="text" placeholder="用户名" class="text"></div>
<div><input type="password" placeholder="密码" ></div>
<div id="abc"></div>
<div><input type="submit" value="提交" class="submit"></div>
</form>
</body>
<script>
var ele_text=document.getElementsByClassName("text")[0];
var ele_submit=document.getElementsByClassName("form")[0];
var ele_abd=document.getElementById("abd");
ele_submit.onsubmit=function () {
if (ele_text.value.length>5){
var ele_warm=document.createElement("h5");
ele_warm.innerText="用户名超出规定长度!";
ele_warm.style.color="red";
ele_warm.style.display="inline";
ele_abd.appendChild(ele_warm);
return false;//阻止submit默认事件
}
}
</script>
</html>
（5）onmouseout和onmouseleave事件
这两个事件都是鼠标移开时触发的事件，不同的是：
- 不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件
- 只有在鼠标指针离开备选元素时，才会触发onmouseleave事件
可以通过一个左侧菜单的案例来搞清楚这两个的区别
<style> .container{ 300px; } .title{ background:green; line-height: 44px; text-align: center; } .list{ display: none; } .list div{ line-height: 40px; } .item1{ background: purple; } .item2{ background: orange; } .item3{ background: greenyellow; } </style> </head> <body> <div class="container"> <div class="title">text</div> <div class="list"> <div class="item1">111</div> <div class="item2">222</div> <div class="item3">333</div> </div> </div> <script> var ele=document.getElementsByClassName("title")[0]; var ele_list=document.getElementsByClassName("list")[0]; var ele_box=document.getElementsByClassName("container")[0]; ele.onmouseover =function () { ele_list.style.display="block"; }; // ele.onmouseleave =function () { // ele_list.style.display="none"; // }这样是有问题的，鼠标往下走也隐藏了,应该给盒子绑定 ele_box.onmouseleave =function () { ele_list.style.display="none"; }; </script>
8.事件传播
父标签绑定事件a,子标签绑定事件b,那么触发事件b的时候，肯定事件a也会触发，这就叫事件绑定
我们需要知道的是怎么解除事件绑定，方法是在子标签中添加e.stopPropagation
<script> ele_inner.onclick =function (e) { alert(123); e.stopPropagation() } </script>
写一个跑马灯的例子，感觉还挺好玩的，下起了雨，下雨天留客天留我不留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<h4>下雨天留客天留我不留</h4>
</body>
<script>
function foo() {
var ele=document.getElementsByTagName("h4")[0];
var first_str= ele.innerText.charAt(0);
var second_str=ele.innerText.slice(1,ele.innerText.length);
var new_str=second_str + first_str;
ele.innerText=new_str
}
setInterval(foo,500)
</script>
</html>
9.标签与标签之间绑定
考虑一个需求：京东下面的商品详情，评论，售后这些内容，是通过点击“商品详情”，“评论”，“售后”这些按钮，就可以显示对应的内容，这个对应关系是怎么实现的呢，这用到了自定义属性
<body>
<ul>
<li gname="c1">商品详情</li>
</ul>
<div id="c1">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</div>
</body>
这样就可以实现两个标签的绑定
前面说了，取属性值一般都用点属性的方式，但是在这里取这个自定义属性，就只能用getAttribute方法了。