JavaScript核心1

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树

文档：一个页面就是一个文档，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.querySelector('.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);}

8.5事件对象的常见属性和方法

8.5.1.e.target与this有区别

<div>123</div>
<ul><li>1</li><li>2</li>
</ul>
<script>//1.e.target返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）var div=document.querySelector('div');div.addEventListener('click',function (e) {console.log(e.target);//<div>123</div>console.log(this);//<div>123</div>})var ul=document.querySelector('ul');ul.addEventListener('click',function (e) {console.log(e.target);//<li>1</li>console.log(this);//<ul><li>1</li><li>2</li></ul>})

8.5.2.e.type返回事件类型如 click

var div=document.querySelector('div');
div.addEventListener('click',fn);
function fn(e) {console.log(e.type);//click
}

8.5.3.阻止默认行为（事件）如（不让链接跳转或者提交按钮不提交）

e.preventDefault();

<a href="https://www.baidu.com">百度</a>
<button>submit</button>
<script>var a=document.querySelector('a');a.addEventListener('click',function (e) {e.preventDefault();//无法跳转})//传统注册方式a.onclick=function (e) {//普通浏览器 e.preventDefault(); 方法//低版本   e.returnValue;属性e.returnValue;//return false 也可以 无兼容性问题 但是后面代码不再执行}

8.5.4.***阻止冒泡

e.stopPropagation();

<div class="f"><div class="s">son</div>
</div><script>var son =document.querySelector('.s');son.addEventListener('click',function (e) {alert('son');e.stopPropagation();//此时只弹出一次son 不再冒泡//当点击fa时还会出现document 因为他没阻止// e.cancelBubble=true;//非标准 兼容性 },true);var fa=document.querySelector('.f')fa.addEventListener('click',function () {alert('father');},false);document.addEventListener('click',function () {alert('document');})

8.6事件委托（代理）

8.6.1***事件委托的原理

不要给每个子节点单独设置监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托作用：只操作了一次DOM，提高了程序的性能

案例

思路：给ul注册点击事件，利用事件对象的target来找当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册时间，就会触发事件监听器

<ul><li>li</li><li>li</li><li>li</li>
</ul>
<script>var ul=document.querySelector('ul');ul.addEventListener('click',function (e) {// console.log(e.target);//<li>li</li>alert('dsdsdds')e.target.style.backgroundColor='pink';})

8.7鼠标事件

8.7.1禁止右键菜单禁止鼠标选中

contextmenu（右键菜单） e.preventDefault();禁止

我是不愿分享的文字//网页元素不能右键
<script>//contextmenudocument.addEventListener('contextmenu',function (e) {e.preventDefault();})

//selectstart
document.addEventListener('selectstart',function (e) {e.preventDefault();
})

8.7.2鼠标事件对象

MouseEvent

1.鼠标在页面的坐标

document.addEventListener('click',function (e) {console.log(e);//MouseEvent {isTrusted: true, screenX: 203, screenY: 254, clientX: 190, clientY: 138, …}console.log(e.clientX);//可视区内 鼠标距离左边的距离console.log(e.clientY);console.log(e.pageX);//距离文档页面的xconsole.log(e.pageY);console.log(e.screenX);//距离电脑屏幕的xconsole.log(e.screenY);
})

案例：一个跟随鼠标的天使（可应用到淘宝大图鼠标移动查看细节上)

分析：

1、鼠标不断移动，使用鼠标移动事件：mousemove

2、在页面中移动，给document注册事件

3、图片要移动，且不占位置，用绝对定位

4、核心原理：每次移动鼠标，都会获得最新鼠标坐标，把这个x和y坐标作为图片的left和top值就可以移动图片

img{position: absolute;width: 30px;height: 50px;
}</style>
<img src="../resource/ts.jpg"><script>var p=document.querySelector('img');document.addEventListener('mousemove',function (e) {var x=e.pageX;var y=e.pageY;// console.log(x,y);p.style.left=x-15+'px';//千万不要忘记加pxp.style.top=y-25+'px';//-25是减了一半高度 就居中了})

8.8键盘事件

8.8.1 键盘按弹

//1.keyup 按键弹起时触发
document.onkeyup=function () {console.log(12);
}
document.addEventListener('keyup',function () {console.log('www');
})
//2.keydown按下时触发
document.addEventListener('keydown',function () {console.log('qqq');
})
//3.keypress 按下时触发 但是不知别功能键 如 ctrl shift 箭头等
document.addEventListener('keypress',function () {console.log('eee');
})
document.addEventListener('keydown',function () {console.log(11);})
//4.执行顺序 down》press》up

8.8.2键盘事件对象

按键对应ASCII值

//keyup keydown不区分大小写 a和A得到的都是65
//keypress 区分大小写
document.addEventListener('keyup',function (e) {console.log(e.keyCode);//65  A//可以利用keycode返回的ASCII值来判断用户按下了哪个键if (e.keyCode===65){alert('按下的是a键');}else{alert('按下的不是a键');}})
document.addEventListener('keypress',function (e) {console.log('press:'+e.keyCode);//97 a
})

案例：模拟京东按键输入内容案例

分析：检测用户是否按下了s键按下了就把光标定位到搜索框里去

用keyCode判断

搜索框获得焦点：使用js里面的focus()方法

<input type="text">
<script>
var search=document.querySelector('input');
// document.addEventListener('keydown',function (e) {//按下时触发所以会写入document.addEventListener('keyup',function (e) {//弹起时才出发所以不写入if (e.keyCode===83){search.focus();}
})

案例：模拟京东快递单号查询效果

分析：内容时，上面的大号字体盒子显示；表单检测用户输入：给表单添加键盘事件；同时把快递单号里面的值value获取过来赋值给盒子innerText作为内容

      .search{width: 150px;}.con{position: relative;top:2px;display: none;width: 100%;height: 30px;border: 0.5px solid #f5f0f0;}.jd{position: absolute;top:50px;width: 148px;}.con::before{content: '';width: 0;height: 0;position: absolute;top:30px;left: 20px;border: 8px solid #222222;border-style: solid dashed dashed;border-color: #f3ecec transparent transparent;}</style></head>
<body>
<div class="search"><div class="con">123</div><input type="text" class="jd" placeholder="请输入您的快递单号">
</div>
<script>
var con=document.querySelector('.con');
var jd=document.querySelector('.jd');
jd.addEventListener('keyup',function () {con.style.display='block';con.innerText=this.value;
})//当我们失去焦点 就隐藏盒子jd.addEventListener('blur',function () {con.style.display='none';})//当获得焦点，就显示盒子jd.addEventListener('focus',function () {if (this.value !==''){con.style.display='block';}})

索框里去

用keyCode判断

搜索框获得焦点：使用js里面的focus()方法

<input type="text">
<script>
var search=document.querySelector('input');
// document.addEventListener('keydown',function (e) {//按下时触发所以会写入document.addEventListener('keyup',function (e) {//弹起时才出发所以不写入if (e.keyCode===83){search.focus();}
})

案例：模拟京东快递单号查询效果

      .search{width: 150px;}.con{position: relative;top:2px;display: none;width: 100%;height: 30px;border: 0.5px solid #f5f0f0;}.jd{position: absolute;top:50px;width: 148px;}.con::before{content: '';width: 0;height: 0;position: absolute;top:30px;left: 20px;border: 8px solid #222222;border-style: solid dashed dashed;border-color: #f3ecec transparent transparent;}</style></head>
<body>
<div class="search"><div class="con">123</div><input type="text" class="jd" placeholder="请输入您的快递单号">
</div>
<script>
var con=document.querySelector('.con');
var jd=document.querySelector('.jd');
jd.addEventListener('keyup',function () {con.style.display='block';con.innerText=this.value;
})//当我们失去焦点 就隐藏盒子jd.addEventListener('blur',function () {con.style.display='none';})//当获得焦点，就显示盒子jd.addEventListener('focus',function () {if (this.value !==''){con.style.display='block';}})