JavaScript核心

Web API阶段 DOM BOM 操作

js基础是语法阶段

web API阶段是应用主要是BOM DOM 页面交互功能

1.API 和Web API

1.1API

（应用程序编程接口），是一些预先定义的函数，给程序员提供的一种工具，以便实现功能。

1.2Web API

是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）

浏览器功能主要通过BOM实现页面元素主要通过DOM实现

1.3小结

1.API是为程序员提供的一个借口，帮助实现功能，不纠结内部如何实现

2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

3.一般的Web API都是有输入输出（函数的传参和返回值），很多都是方法（函数）

4.Web API可结合前面的内置对象方法的思路学习

2.DOM

2.1概述

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML || XML）的标准标准接口

2.2DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNK1pWVK-1594215136231)(C:\Users\68508\Desktop\20151110111104365.jpg)]

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

3.获取元素

3.1如何获取页面元素

3.1.1根据 ID获取

getElementById（）

返回的是DOM的 element对象

var timer=document.getElementById('time');
console.log(timer);//<div id="time">2020</div>
console.log(typeof timer);//object
console.dir(timer);//打印返回的元素对象 更好的查看里面的属性和方法
var timer0=document.getElementById('t');
console.log(timer0);//null

3.1.2根据标签名获取

使用下面的方法可以返回带有指定标签名的对象的集合（伪数组形式）

var lis=document.getElementsByTagName('li');
console.log(lis);
/*HTMLCollection  HTMLCollection(4) [li, li, li, li]  伪数组形式
0: li
1: li
2: li
3: li
length: 4*/

想要操作里面的元素就需要遍历

得到的元素对象是动态的（元素变他也变

如果页面中只有一个li 返回的也是伪数组

如果没有这个元素返回的是空的伪数组

2.获取ol有序列表

获取某个元素（父元素）内部所有指定标签名的子元素。

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

// element.getElementsByTagName('标签名');

var ols=document.getElementsByTagName('ol');//[ol]
// console.log(ols.getElementsByTagName('li'));//报错
console.log(ols[0].getElementsByTagName('li'));//获取第一个ol
/*<HtmlCollection length="4"><li>hhh</li><li>hhh</li><li>hhh</li><li>hhh</li></HtmlCollection>*/

或者起个id

var ols=document.getElementById('ols');
console.log(ols.getElementsByTagName('li'));

3.1.3通过类名

H5新增

//document.getElementsByClassName() 根据类名获得某些元素集合
var boxes=document.getElementsByClassName('box');
console.log(boxes);
/*
<HtmlCollection length="2">
<div class="box">2020</div>
<div class="box">2020</div>
</HtmlCollection>*/

3.1.4根据指定选择器返回第一个元素对象

H5新增

// .querySelector('选择器');
var firstBox=document.querySelector('.box');//  . 类选择器
console.log(firstBox);//<div class="box">2020</div>
var li=document.querySelector('li');//标签
console.log(li);//<li>dsadsd</li>
var ol=document.querySelector('#ols');//#id
console.log(ol);//<ol id="ols">...</ol>

3.1.5根据指定选择器返回所有元素对象集合（伪数组）

 var allBox=document.querySelectorAll('.box');
console.log(allBox);
/*<NodeList length="2">
<div class="box">2020</div>
<div class="box">2020</div>
</NodeList>*/

3.2获取特殊页面元素

1.获取body元素

var bodyEle=document.body;
console.log(bodyEle);//<body>...</body>

2.获取html元素

var htmlEle=document.documentElement;
console.log(htmlEle);//<html lang="en">...</html>

4.事件基础

4.1事件概述

js使我们有能力创建动态页面，而事件是可以被js侦测到的行为

触发–响应机制

如：点击按钮时产生一个事件，然后执行某些操作

4.2事件三要素

4.2.1事件源

事件被触发的对象如按钮对象

var  btn=document.getElementById('btn');

4.2.2事件类型

如何触发什么事件如鼠标点击（onclick）

btn.onclick

4.2.3事件处理程序

通过一个函数赋值的方式完成

btn.onclick = function () {alert('ll');
}var  btn=document.getElementById('btn');
btn.onclick = function () {alert('ll');
}

4.3执行事件的步骤

4.3.1获取事件源

var div=document.querySelector('div');

4.3.2绑定事件注册事件

div.onclick

4.3.3添加事件处理程序

div.onclick=function () {console.log('我被点了');
}

5.操作元素***

5.1改变元素内容

5.1.1element.innerText

从起始位置到终止为止，不识别html标签，同时空格和换行也会去掉

//1.element.innerText
//事件：当点击按钮时，div里的文字会改变
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.onclick=function () {// div.innerText='2020-7-1';//div里的内容变了div.innerText=getDate();//2020年7月1日周三
}function getDate() {var date =new Date();var year=date.getFullYear();var month=date.getMonth()+1;var dates=date.getDate();var arr=['周日','周一','周二','周三','周四','周五','周六'];var day=date.getDay();return (year+'年'+month+'月'+dates+'日'+arr[day]);
}
//元素可以不用添加事件 即点开网页时就出现
var p=document.querySelector('p');
p.innerText=getDate();

5.1.2element.innerHTML*

从起始位置到终止为止，识别html标签，空格和换行不会去掉

5.1.3区别

innerText不识别html标签（非标准）

innerHTML识别html标签（W3C标准）

var div=document.querySelector('div');
div.innerText='今年<strong>2020</strong>';//今年<strong>2020</strong>
div.innerHTML='今年<strong>2020</strong>';//加粗

这两个属性可读写，可以获取里面的内容

var p=document.querySelector('p');
console.log(p.innerText);//我是蚊子 jjj 祛除了空格和换行
console.log(p.innerHTML);//保留了内容里html标签 保留格式
/*
* 我是蚊子<span>jjj</span>*/

5.2常用元素的属性操作

案例1：点击按钮切换图片

<button id="xh" >小花</button>
<button id="bd">别的</button>
<img src="../resource/001.png" title="xh"><script src="jss.js"></script>

//获取元素
var xh=document.getElementById('xh');
var bd=document.getElementById('bd');
var img=document.querySelector('img');
//注册事件
bd.onclick=function () {img.src='../resource/01.jpg';img.title='bd';
}
xh.onclick=function () {img.src='../resource/001.png';img.title='xh';
}

案例2：分时显示不同图片，显示不同问候语

上午，下午，晚上

分析：

1.根据不同时间所以需要日期内置对象

2.利用分支语句来设置不同图片

3.需要一个图片，并且根据时间修改图片，就需要用操作元素src属性

4.需要div 显示不同问候语

5.3表单元素的属性操作

<button>btn</button>
<input type="text" value="输入内容"><script>var btn=document.querySelector('button');var input=document.querySelector('input');btn.onclick=function () {// input.innerHTML='点击了';//不会变 因为这是innerHTML是普通盒子用的 如：div标签里的内容//表单里的值 文字内容是通过value来修改的input.value='被点击了';//如果想要某个表单被禁用 不能再点击 用 disabled///如想要button禁用btn.disabled=true;// this.disabled=true; 同理// this指向的是事件函数的调用者 btn}
</script>

案例：仿京东显示密码

点击按钮将密码框切换为文本框，明文显示密码

算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0；如果是0就切换为密码框，flag设置为1；

<div class="box"><lable for=""><img src="../resource/by.png" id="eye"></lable><input type="password" id="pwd" >
</div><script>//1.获取元素var eye=document.getElementById('eye');var pwd=document.getElementById('pwd');//2.注册事件var flag=0;eye.onclick=function () {if(flag==0){pwd.type='text';flag=1;eye.src='../resource/zy.jpg'}else{pwd.type='password';flag=0;eye.src='../resource/by.png';}}</script>

5.4样式属性操作

改变元素大小，颜色，位置等样式

<style>div{width: 200px;height: 200px;background-color: pink;}</style></head>
<body><div ></div>

1.行内样式操作

element.style.

<script>
var div=document.querySelector('div');div.onclick=function () {this.style.backgroundColor='purple';this.style.width='250px';
}</script>

此处出现行内样式权重>内部样式所以会改变

案例：点击关闭某元素

核心：利用样式的显示和隐藏完成，display：none隐藏元素display：block显示元素

<div class="box">淘宝二维码<img src="../resource/tb.jpg"><i class="close-btn">x</i><!--小图标标签--></div><script>
var btn=document.querySelector('.close-btn');
var box=document.querySelector('.box');
btn.onclick = function () {box.style.display='none';
}</script>

案例：显示隐藏文本框内容

核心：表单需要两个事件：获得焦点onfocus 失去焦点onblur

<style>input{color: #999;}</style></head>
<input type="text" value="手机"></div><script>
var text=document.querySelector('input');
text.onfocus=function () {// console.log('得到焦点');if (text.value==='手机'){this.value='';}//把文本框内容变深this.style.color='#123444';
}
text.onblur=function () {// console.log('失去焦点');if (text.value===''){this.value='手机';}this.style.color='#999';
}
</script>

2.类名样式操作element.className**

如果样式较多，功能复杂的情况下用

        div{width: 200px;height: 200px;background-color: pink;}.change{background-color: purple;color: white;font-size: 25px;margin-top: 50px;}</style></head>
<div class='first'>ll
</div><script>var div=document.querySelector('div');div.onclick=function () {// this.style.backgroundColor='purple';// this.style.width='250px';this.className='change';//当前元素类名改为change}
</script>

如果想要保留原来的类信息：

this.className='first change';//多类名

案例：密码框验证信息

        div{width: 600px;margin: 100px auto;}.message{display: inline-block;font-size: 12px;color: #999;background: url("../resource/001.png") no-repeat left center;padding-left: 20px;}.wrong{color: red;background-image: url("../resource/01.jpg");}.right{color: green;background-image: url("../resource/tb.jpg");}</style></head>
<div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script>var ipt=document.querySelector('.ipt');var message=document.querySelector('.message');ipt.onblur=function () {if (this.value.length<6||this.value.length>16){message.className='message wrong';message.innerHTML='您应该输入6~16位';}else{message.className='message right';message.innerHTML='true';}}</script>

5.5排他思想（算法

<button>a1</button>
<button>a2</button>
<button>a3</button>
<button>a4</button><script>
var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){btns[i].onclick=function () {//先把所有按钮背景元素去掉，再让当前按钮变色for(var i=0;i<btns.length;i++){btns[i].style.backgroundColor='';}this.style.backgroundColor='pink';}
}</script>

案例：换肤

给出几个图片当点击这个小图片时就让页面背景改为当前的图片

核心算法：把当前图片的src路径取过来，给body作为背景

  <style>*{margin: 0;padding:0;}body{background: url("../resource/01.jpg") no-repeat center top;}li{list-style: none;}.baidu{overflow: hidden;margin: 100px auto;background-color: #fff;width: 302px;padding-top:3px;}.baidu img{display: inline-block;float: left;width: 100px;height: 80px;}</style></head>
<body>
<ul class="baidu"><li><img src="../resource/tb.jpg"></li><li><img src="../resource/01.jpg"></li><li><img src="../resource/001.png"></li>
</ul><script>var imgs=document.querySelector('.baidu').querySelectorAll('img');for (var i=0;i<imgs.length;i++){imgs[i].onclick=function () {document.body.style.backgroundImage='url('+this.src+')';}}</script>

案例：表格隔行变色

鼠标事件鼠标经过：onmouseover 鼠标离开 onmouseout

思路：鼠标经过tr行当前的行变背景颜色，鼠标离开去掉当前颜色

注意：第一行（thead）不需要变色因此我们需要获取tbody里的行

<div class="box"><table><thead><tr><td></td><td></td><td></td></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></tbody></table></div>
<script>var trs=document.querySelector('tbody').querySelectorAll('tr');for (var i=0;i<trs.length;i++) {trs[i].onmouseover=function () {this.style.backgroundColor = 'pink';}trs[i].onmouseout=function () {this.style.backgroundColor = '';}}</script>

案例：表单全选

<div class="box"><table><thead><tr><td><input type="checkbox" id="all"></td><td></td><td></td></tr></thead><tbody id="d"><tr><td><input type="checkbox"></td><td>2</td><td>3</td></tr><tr><td><input type="checkbox" ></td><td>2</td><td>3</td></tr><tr><td><input type="checkbox"></td><td>2</td><td>3</td></tr></tbody></table></div>
<script>var all=document.querySelector('#all');var ipt=document.querySelector('tbody').querySelectorAll('input');all.onclick=function () {for (var i=0;i<ipt.length;i++){ipt[i].checked=this.checked;}}for (var i=0;i<ipt.length;i++){//给每个复选框都绑定事件ipt[i].onclick=function () {var flag=true;for (var i=0;i<ipt.length;i++){//每次点击 都要检查4个框是否都被选中，选中为true 维权选中为falseif (!ipt[i].checked){flag=false;break;}}all.checked=flag;}}</script>

5.6获取自定义属性值

5.6.1获取属性值

1.element.属性

2.element.getAttribute(‘属性’)

    var div=document.querySelector('div');console.log(div.id);console.log(div.getAttribute('id'));
//box

区别：

element.属性获取的是内置属性（元素本身自带

get。。。可获取自定义属性

<div id="box" index="11">console.log(div.getAttribute('index'))//11

5.6.2设置元素属性值

1.设置内置属性

div.id='test';
console.log(div.id);//test
div.className='ttt';

2.设置自定义属性值

div.setAttribute('index',2);
console.log(div.getAttribute('index'))//2
div.setAttribute('class',ww);

3.移除

div.removeAttribute('index');

案例：tab栏切换案例***

分析：

tab栏分上下两个大模块；

上面的选项卡模块，点击某一个，其底色变成红色，其余不变（排他思想）用修改类名方式

下面的显示内容模块随模块变而变

核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号

    <style>.tab{position: absolute;left: 200px;top:200px;}.tab_list{width: 400px;height: 30px;background-color: #767171;border: 1px solid #333333;margin: 0;}ul{margin: 0 ;padding: 0;}li{list-style: none;display: inline-block;float: left;/* margin-left: 25px;margin-right: 25px;*/width: 100px;height: 30px;text-align: center;line-height: 30px;//设行高=盒子高度padding: 0;}.c{background-color: darkred;color:#fff;}.item{display: none;}</style></head>
<body>
<div class="tab" ><div class="tab_list"><ul><li class="c" >介绍</li><li>包装</li><li>售后</li><li>评价</li></ul></div><div class="tab_con"><div class="item" style="display: block">商品介绍模块内容</div><div class="item">规格和包装内容</div><div class="item">售后保障内容</div><div class="item">评价内容</div></div>
</div>
<script>var  tab_list=document.querySelector('.tab_list');var lis=document.querySelectorAll('li');var items=document.querySelectorAll('.item');for (var i=0;i<lis.length;i++){//开始给五个小li设置索引号lis[i].setAttribute('index',i);lis[i].onclick=function () {for (var  i=0;i<lis.length;i++){lis[i].className='';}this.className='c';var index=this.getAttribute('index');//排他 留下对应的itemfor(var i=0;i<items.length;i++){items[i].style.display='none';}items[index].style.display='block';}}</script>

5.7H5自定义属性

目的：保存并使用数据有些数据可以保存到页面中而不用保存到数据库中

但有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性

1.设置h5自定义属性

h5规定自定义属性以data-开头作为属性名并且赋值

比如

或js

2.获取

1.兼容性获取 element.getAttribute(‘data-index’);

2.H5新增 element.dataset.index 或 element.dataset[‘index’] ie11

只能获取data-开头的

<div class="tab" data-list-name="andy" >var div=document.querySelector('div');
console.log(div.getAttribute('data-list-name'));
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

6.节点操作

6.1为啥学节点操作？

因为利用DOM提供的方法获取元素document。。。等逻辑性不强，繁琐

所以利用节点层次关系（父子兄），逻辑性强但兼容性稍差

6.2节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等）在dom中，节点用node来表示

一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性

元素节点： nodeType 为1 属性节点nodeType为2

文本节点：nodeType为3 （文本节点包含文字、空格、换行等）

在实际开发中，节点主要操作的是元素节点

6.3点层级

常见：父子兄关系

见图DOM树

6.3.1父节点

//1.父节点 .parentNode
var ewm=document.querySelector('.ewm');
//var box=document.querySelector('.box');
console.log(ewm.parentNode);//得到的最近的父节点 如果找不到就返回null

6.3.2子节点

//2.子节点 .childNodes
var ul=document.querySelector('ul');
//var lis=ul.querySelectorAll('li');
console.log(ul.childNodes);//包含文本节点、元素节点等
//NodeList(5) [text, li, text, li, text]
console.log(ul.childNodes[0].nodeType);

一般用下边的：

非标准）

//.children
console.log(ul.children);//HTMLCollection(2) [li, li]

2.第一个子元素和最后一个

console.log(ul.firstChild);//#text
console.log(ul.lastChild);//#text

主要获取元素节点：

console.log(ul.firstElementChild);
console.log(ul.lastElementChild);//<li></li>

有兼容性问题 ie9

实际开发写法**：

console.log(ul.children[0]);
console.log(ul.children[ul.children.length-1]);//<li></li>

案例：下拉菜单

var nav=document.querySelector('.nav');
var lis=nav.children;
for (var i=0;lis.length;i++){lis[i].onmouseover=function () {this.children[i].style.display='block';}lis[i].onmouseover=function () {this.children[i].style.display='none';}
}

6.3.3兄弟节点

<div>div</div>
<span>span</span><script>
//.nextSibLing .previousSibling)
var div=document.querySelector('div');
console.log(div.nextSibling);//#text
console.log(div.previousSibling);//#text//元素节点 ie9以上
console.log(div.nextElementSibling);//<span>span</span>
console.log(div.previousElementSibling);//null

解决兼容性问题？封装一个兼容性函数

6.4创建和添加节点

document.createElement('');

<ul><li>123</li>
</ul><script>
var li=document.createElement('li');//创建节点再添加
var ul=document.querySelector('ul');ul.appendChild(li);//node.appendChild(child) node父亲
//后面追加元素
//下边是在前面追加
var lili=document.createElement('li');ul.insertBefore(lili,ul.children[0]);

案例：发布留言

<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul><script>var btn=document.querySelector('button');var text=document.querySelector('textarea');var ul=document.querySelector('ul');btn.onclick=function () {if (text.value==''){alert('未输入');}else{var li=document.createElement('li');li.innerHTML=text.value;// ul.appendChild(li);ul.insertBefore(li,ul.children[0]);}}

6.5删除节点

// ul.removeChild(ul.children[0]);

<button>删除</button>
<ul>
<li>1</li><li>2</li><li>3</li>
</ul><script>
var ul=document.querySelector('ul');
var btn=document.querySelector('button');
// ul.removeChild(ul.children[0]);
btn.onclick=function () {// ul.removeChild(ul.children[0]);if(ul.children.length==0 ){this.disabled=true;}else{ul.removeChild(ul.children[0]);}
}

案例：删除留言

分析：

1、当我们把文本域里的值赋给li的时候多添加一个删除的链接

2、需要吧所有的链接获取过来，当我们点击当前的链接时候，删除当前链接所在的li

3、阻止链接跳转需要添加javascript:void(0);或者 javascript:;

<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul><script>var btn=document.querySelector('button');var text=document.querySelector('textarea');var ul=document.querySelector('ul');btn.onclick=function () {if (text.value==''){alert('未输入');}else{var li=document.createElement('li');li.innerHTML=text.value+ '<a href="javascript:;">删除</a>';// ul.appendChild(li);ul.insertBefore(li,ul.children[0]);//删除元素 当前链接的livar as=document.querySelectorAll('a');for (var i=0;i<as.length;i++){as[i].onclick=function () {//删除当前a所在的liul.removeChild(this.parentNode);}}}}
</script>

6.6复制节点(克隆)

node.cloneNode()

注意：括号为空或者false 是浅拷贝只复制标签不复制内容

为true会复制内容

6.7案例：动态生成表格

 <style>table{width:500px;margin: 100px auto;border-collapse: collapse;/*合并边框*/text-align: center;}td,th{border: 1px solid #333333;}thead,tr{height: 40px;background-color: #e1e1e1;}</style></head>
<body>
<table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody>
</table><script>var datas=[{name:'www',subject:'java',score:100},{name:'jjj',subject:'java',score:98},{name:'ggg',subject:'java',score:70}];//创建行 有几个人建几行 通过数组长度得到var tbody=document.querySelector('tbody');for (var i=0;i<datas.length;i++){//行var tr=document.createElement('tr');tbody.appendChild(tr);//在每个行里创建单元格 td 单元格数量取决于对象属性个数for (var k in datas[i]){//创建跟数据有关系的单元格var td=document.createElement('td');td.innerHTML=datas[i][k];tr.appendChild(td);}//列//创建有删除的单元格var td=document.createElement('td');td.innerHTML='<a href="javascript:;">删除</a>';tr.appendChild(td);}//删除操作 把所有a获取过来var as=document.querySelectorAll('a');for (var i=0;i<as.length;i++){as[i].onclick=function () {//点击a 删除当前所在的行（链接的爸爸的爸爸）tbody.removeChild(this.parentNode.parentNode);}}

6.8 三种动态创建元素区别

<button> dd </button>
<p>add</p>
<div class="inner"></div>
<div class="creat"></div>
<script>//1 document.write('<div>123</div>');  如果页面文档流加载完毕 在调用这句话会导致页面重绘var btn=document.querySelector('button');btn.onclick=function () {document.write('<div>123</div>');}//2.innerHTMLvar inner=document.querySelector('.inner');for (var i=0;i<100;i++){inner.innerHTML+='<a href="#">百度</a>'}//3.document.createElement('a');var creat=document.querySelector('.creat');for (var i=0;i<100;i++){var a=document.createElement('a');creat.appendChild(a);}
//2拼接字符串3不是拼接 3效率高
//2可以采用拼接数组形式拼接 效率会比cr高
//但cr结构更清晰

7.DOM重点核心总结

8.事件高级

8.1注册事件（绑定事件）

两种方式：

8.1.1传统方式

on开头如onclick

<button> ct </button>
<button>ff</button>
<script>var btns=document.querySelectorAll('button');btns[0].onclick=function () {alert('hi');}btns[0].onclick=function () {alert('how are you');}
//只显示最后一个

特点：注册时间的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

8.1.2方法监听注册方式

addEventListener()其中的方法

ie9之前的可用 attachEvent()代替

特点：同一个元素同一个事件可以注册多个监听器（事件处理程序）

按注册顺序依次执行

 var btns=document.querySelectorAll('button');// 里面的事件类型是字符串 必须加引号 而且不带onbtns[1].addEventListener('click',function () {alert(22);})btns[1].addEventListener('click',function () {alert('dsdsa');})//弹两次
</script>

8.2删除事件（解绑事件）

8.2.1删除事件的方式

1.传统方式

<div>1</div>
<div>2</div>
<div>3</div><script>
var divs=document.querySelectorAll('div');
divs[0].onclick=function () {alert(11);divs[0].onclick=null;
}

divs[1].addEventListener('click',fn)
function fn() {alert(22);divs[1].removeEventListener('click',fn);//移除注册事件
}3.

8.3DOM事件流

事件流描述是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM事件流

比如：给一个div注册了点击事件

这个的DOM事件流分为三个阶段

1.捕获阶段 documen-》html-》body-》div

2.当前目标阶段div

3.冒泡阶段div-》body-》html-》document

图：事件流

注意;1.js代码只能执行捕获或者冒泡其中的一个阶段

2.onclick 和attachEvent（）只能得到冒泡阶段

3.捕获阶段如果addEventListener 第三个参数是true 则处于捕获阶段

<div class="f"><div class="s">son</div>
</div><script>var son =document.queryCommandState('.s');son.addEventListener('click',function () {alert('son');},true);

4.冒泡阶段如果addEventListener 第三个参数是false 则处于冒泡阶段

son.addEventListener('click',function () {alert('son');},false);

8.4事件对象

<div>123</div>
<script>var div=document.querySelector('div');//1.event 就是一个事件对象 当形参来看 事件对象可以自己命名 一般 e//2.事件对象只有有了事件才会存在，是系统自动创建的 不需要传递参数//3.事件对象 是事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标；//如果是键盘事件 里面就包括键盘事件信息 比如 判断用户按下了哪个键//4.兼容性 ie6/7/8用 window.eventdiv.onclick=function  (event) {console.log(event);}

的方式