第二章 WEB API
Day01 Web API
API Application Programming Interface , 应用编程接口
DOM （documentobject model）文档对象模型
用于处理可扩展标记语言（HTML、Xhtml）的标准编程接口
操作DOM可以改变网页的内容、结构和 样式
文档、节点与元素
文档：一个页面就是一个文档 document
节点：网页中所有内容都是节点node（标签、属性、文本、注释等）
标签节点：网页中所有标签通常称为元素节点，又称为元素，用element表示。
DOM把以上内容全部看作对象
获取元素途径
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
1.根据ID
document.getElementById('time');//注意 element不加s
返回值：元素对象或者null
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
//console.dir()可以显示一个对象所有的属性和方法。
2.根据标签名TagName
返回值：元素对象集合（伪数组，数组元素是元素对象）
getElementsByTagName('li');//注意 elements 加s
var btns = document.getElementByTagname('button');
//btns得到的是伪数组
返回的数据以伪数组形式存储，所以可以通过for lis.length来遍历数组
var lis = document.getElementsByTagname('li');
for (var i = 0; i < lis.length;i++){
console.log(lis[i]);
}
如果有多个重复的，可以写为 通过id 来获得元素然后在获得内部的标签
var nav = document.getElementById('nav');
var navlis = nav.getElementByTagName('li');
//注意这里getElementByTagName前面写的不再是document，
//而是特指了nav
3.H5 新增获取方式
3.1 getElementsByClassName
根据类名来获取
document.getElementsByClassName(‘.class name’);
3.2 querySelector
根据 指定 选择器返回第一个元素对象
document.querySelector(‘选择器’)；
写法
标签 ''中间直接写
类 .+ class name;
ID # + idname;
3.3 querySecectorAll
用querySecectorAll获取指定选择器的所有元素对象集合，获得集合之后还是以伪数组形式存储
var allbox = document.querySelectorAll(’.box’)
4特殊元素获取
4.1 获取body标签
document.body //返回元素对象
console.dir(body); //console.dir()可以显示一个对象所有的属性和方法。
4.2 获取html元素
document.documentElement //返回html元素对象
//html contains head and body
var timer = document.getElementById('time');
console.log(time);
console.log(typeof time);//控制台输出 object 返回的是元素对象，所以称为文档元素模型
事件
事件三要素
1.事件源 2.事件类型 3.事件处理程序
1.事件源，事件被触发对象 谁 例如 按钮
<button id=‘btn’> tangbohu </button>
var btn = document.getElementById(‘btn’);
2.事件类型，如何触发，从哪个动作开始，比如鼠标点击鼠标经过等。
3.事件处理程序，通过函数赋值方式来完成
btn.onclick = function() {
alert(‘dianqiuxiang’)
}
执行事件的步骤
1.获取事件源
2.绑定事件/注册事件
3.添加事件处理程序
常见鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标左键点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouoseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
js改变内容
改变元素的内容，比如文字等。
innertext / innerhtml
innertext不识别html标签，里面写标签会被直接显示出来。
不显示换行和空格。
innerhtml识别标签，保留空格与换行。w3school推荐标准。
保留标签空格换行。
两个属性均可读写，可以获取元素内的内容
表单里面的文字是通过value来获得
html不可以
<botton>显示当前时间</button>
<div> 某个时间</div>
<script>
var btn = ducument.queryselector('button');
var div = document.queryselector('div');
btn.onclick = function() {
div.innerText = '2020-6-6';
}
利用dom可以操作表单元素的属性有:
type , value, checked ,selected, disable
一个案例：
鼠标悬停放大图片
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
transform: scale(1.2, 1.2);
}
js改变样式
1 .直接写行内样式
产生的是行内样式，css权重高。
案例：
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
2 .修改对应样class属性，来达到修改样式目的
案例：
// 首先判断的事件是表单失去焦点 onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
// 因为里面变化样式较多，我们采取className修改样式
// 1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2. 注册事件 失去焦点
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
判断文本长度是否符合要求
if (this.value.length <6) {
}
Day02 节 点 操 作 与 换 肤 案 例
循环排他思想
1先把所有元素样式清理掉
2在设置当前想要的样式
onmouseover
onmouseout
图片换肤源码
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: url(img/1.jpg) no-repeat center top;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
width: 100px;
}
.baidu img {
width: 100px;
}
<ul class="baidu">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
JS部分：
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length;i++) {
imgs[i].onclick = function() {
console.log(this.src);
document.body.style.backgroundImage = 'url('+ this.src+')' ;
}
}
通过this.src 可以获得当前元素的路径。
所有属性在js中更改的时候都是字符串形式。字符串中添加参数修改：’++’
background 用法解析
语法：
background : background-color || background-image || background-repeat || background-attachment || background-position
transparent none repeat scroll 0% 0%
background
参数：
该属性是复合属性。请参阅各参数对应的属性。
说明：
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对 应的单个属性设置。
默认值为：transparent none repeat scroll 0% 0%。
尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象 下面显示。
对应的脚本特性为background。请参阅我编写的其他书目。
示例：
div { background: red no-repeat scroll 5% 60%; }
body { background: url(“images/aardvark.gif”) repeat-y; }
pre { background: url(“images/aardvark.gif”) top; }
caption { background: fuchsia; }
修正过往笔记错误：
错误写法：
background-img：url(images/logo.png);
正确写法：
background-image：url(images/logo.png);
1、背景图片语法
background-image:url() 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上
简写背景图片语法：
background:url(图片地址) no-repeat left top
注意！
在js中写为：
document.body.style.backgroundImage = ‘url(’ + this.src + ‘)’;
驼峰命名，不加横杠。
table模型：
标签定义 HTML 表格中的行。body 元素是定义文档的主体，通俗的来说，表示网页的主体部分。
标签定义 HTML 表格中的标准单元格。例如是一个单元格 标签定义 HTML 表格中的行。例如:是一行 通常使用在表格的标题栏位，就是说通常使用来当表格中的每一列的标题！<table>
<thead> 表单头
<tr> 头中的行
<th></th><!--行中的表头 -->
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody> <!--表单正文 -->
<tr> <!--正文中的行 -->
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
表单全选反选源码：
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
//console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
属性值相关操作：
1.获取属性值：
element.属性
获取原始属性
例子：
var div = document.querySelector('div');
console.log(div.id);
console.log(aa.className);//注意className的写法
新办法：
element.getAttribute(‘属性名字’)
默认属性，经常不够用，所以要自定义属性。
可以获得自定义属性
var aa = document.querySelector('ul');
console.log(aa.index);
console.log(aa.getAttribute('class'));
console.log(aa.getAttribute('index'));
2.设置属性值：
(1)element.属性 = ‘值’
div.className = ‘nav’; 注意className写法奥
(2)element.setAttritube(‘属性’,‘值’)
div.setAttribute(‘class’,‘footer’); 注意class写法奥
3.删除属性值：
div.removeAttribute(‘index’);
Tab栏切换源码
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</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">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
对应JS：
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
H5自定义属性
设置自定义属性的目的：为了保存并使用数据。有些数据可以保存在网页上，不用保保存在数据库。
set集合
1.设置自定义属性
H5规定 data- 开头，作为属性名并赋值。
2.获取
2.1 getAttribute
2.2 H5 新增 element.dataset
dataset只能获取data-开头的自定义属性
有严重兼容性问题ie11才开始支持
<body>
<div getTime="20" data-index="2" data-list-name="andy">111</div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 50);
console.log(div.getAttribute('data-time'));
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
节点操作
目的：获取元素。
获取元素通常有两种方式
1.Dom提供的方法获取元素
逻辑性不强,操作繁琐
2.使用节点层级关系获取元素
利用父子关系获取元素
逻辑性强但是兼容性差
节点操作更简单
网页中所有内容都叫节点
节点用notetype、notename、notevalue等三项属性
nodeType = 1 ，是元素节点
nodeType = 2 ，是属性节点
nodeType = 3 ，是文本节点（包含文字空格换行等）
console.dir(box); //dump class = box的详细信息。
href ：属性
父节点：XXXX.parentNode;
返回最近的父元素，如果没有则返回null
子节点：parentNode.childNodes (标准)
换行被看做文本节点
子节点获取全部节点，如果要获取元素节点，则需要特殊处理。
所以一般不提倡使用childNodes
子元素节点：parentNode.children(非标准)
获取全部子元素节点
first/lastElementChild：
firstchild返回第一个子节点，如果是文本，那就返回文本子节点
firstElementChild返回第一个子元素节点（子标签节点）
lastElementChild
注意：兼容性问题 IE9以上才兼容
console.log(ol.firstElementChild);
实际开发写法：
log(ol.children[0]);
如果不知道有多少children，那么把对象看作数组，求length，-1 即可得到最后一个孩子。
log(ol,children[ol.children.length - 1]);
兄弟节点：
1.node.nextSibling 得到所有节点，包括元素或者文本节点等。
2.node.previousSibling
3.node.nextElementSibling 得到下一个兄弟元素节点
4.node.previousElementSibling
注意：elementsibling IE9以上才支持
nodeType：
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。
获得 body 元素的节点类型：
document.body.nodeType;
创建节点：
document.createElement(‘tagname’);
1.创建
var li = document.createElement(‘li’);
2.追加进去
node.appendChild(‘child’)
var ul = document.querySelector(‘ul’);
ul.appendChild(‘li’);
例：
<body>
<ul>
<li>
123
</li>
</ul>
<script>
</script>
节点添加在前面
node.insertBefore(child ,指定元素位置)
ul.insertBefore(li,ul.children[0]);
return false 终止js程序。
Day03 删 除 节 点 和 事 件 高 级
删除留言案例
阻止链接跳转：添加 javascrip:void(0); 或者 javascrip:; 例如 ：href = javascrip:;
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3) 删除元素 删除的是当前链接的li 它的父亲
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
复制节点
node.cloneNode();
如果括号内为空或者为false，则为浅拷贝，只复制标签不复制里面的内容
括号里面为true 深拷贝复制标签，复制里面的内容
返回调用该方法的节点的一个副本.
语法
var dupNode = node.cloneNode(deep);node将要被克隆的节点dupNode克隆生成的副本节点deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
实例
var tip =document.getElementById("tip");
var cloneTip = tip.cloneNode(true);
动态生成表格案例
1 .js数组里面可以存储任何数据类型，比如存储对象Object
2 .td.innerHTML = datas [i] [k]; 写入datas里面第 i 个对象中的第 k 个属性的值
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
console.log(datas[0].name);
// 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
// 外面的for循环管行 tr
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) {
// 里面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
// console.log(datas[i]);
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
创建元素 三个方法
for(var k in obj)
k得到的是属性名，obj[k]得到的是属性值
function alertObj(obj) {
var output = "";
for (var i in obj) {
var property = obj[i];
output += i + " = " + property + "\n";
}
alert(output);
}
1.document.write
在页面中直接创建元素
会导致页面重绘，页面原内容没有了
window.onload = funtion {
}// 整个页面加载完了再做事
2.element.innerHTML
innerHTMl 可以赋值 赋值为拼接字符串，开创新内存空间然后拼接字符串，速度慢
innerHTML是将内容写入某个dom节点中不会导致整个页面重绘
创建多个元素效率更高（数组法，不要用拼接字符串法），结构稍微有点复杂。
var arr = [];
for (var i = 0; i <=100 ; i++){
arr.push('<a href="#"> baidu </a>');
}
document.body.innerHTML = arr.join('');//数组转换为字符串
//join() 方法用于把数组中的所有元素放入一个字符串。
//速度之有ms级
3.document.createElement()
创建多个元素效率低一点，但是结构清晰。
节点操作总结
1 .创建 creat
1 .1cocument.write
1 .2 innerHTML
1 .3 creatElement
2 .增 insert
2.1 appendChild 在后面添加
2.2 insertBefore 在前面添加
3 .删 delet
removeChild
4 .改 chage
主要修改dom的元素屋性，dom元素的内容、雇性，表单的值等
4 .1修改元素属性：src、href、titled 直接 标签.属性 进行修改
4 .2修改普通元素内容：innerHTML、innerText
4 .3修改表单元素：value、type、disable
4 .4修改元素样式：style、className
5 .查询query
主要取查询dom的元素
5 .1 API 方法：getElementByld、getElementsByTagName 古 老 用 法 不 荐
5 .2 H5提供的新方法：querySelector、querySelectorAll 提倡
5 .3 利周节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling)提倡
6 . 属性操作
6 .1 setAttritube ： 设置dom属性
6 .2 getAttritube ： 得到dom属性
6 .3 removeAttritube ：移除属性
7 .事件操作
点击事件鼠标经过事件等
事件三要素 ：事件源.事件类型 = 事件处理程序
DOM
关于DOM ： 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标编程接口。w3c已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容、结构和样式。
通过DOM获取过来的dom元素是一个对象（object），所以也成为文档对象模型。
事件高级
注册事件两种办法
1.传统法 利用on开头的时间，特点：注册事件的唯一性，后面的注册事件覆盖前面的。
<button onclick = "alert('hi')"></buton>
btn.onclick = function(){
}
2.监听法 addEventListener
兼容写法
attachEvent:兼容ie9 以前版本 ie9 之前的版本不支持addEventListener。 非标准不推荐使用，
eventTarget.attachEvent(eventNameWIthOn,callBack)
监听法 addEventListener
(1) 里面的事件类型是字符串，必定加 ” 引号，不加on
(2) 同一个元素同一个时间可以添加多个侦听器（事件处理程序）
btn[1].addEventListener('click',function() {
//事件是字符串，不带on
alert(22);
})
兼容问题解决方案–封装一个兼容性函数
如果要跨不同版本，封装一个兼容函数，自动判断可以使用的方法
function addEventListener (element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener (eventName, fn); // 第三个参数，默认是false
} else if (element. attachEvent) {
element. attachEvent ( 'on' + eventName, fn);
} else {
// 相当于 element • onclick = fn;
element['on' + eventName] = fn;
}
删除事件
也叫解绑事件
具体方法：
1.传统注册方式
eventTarget.onclock = null;
2.监听注册方法
2 .1 eventTarget.removeEventListener(type,lintener[]);
2 .2 IE浏览器 eventTarget.detachEvent(eventNameWithOn,callback);
//监听注册解绑方式
divs[1].addEventListener('click',fn)//里面不能用匿名函数，fn也不用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click',fn);
}
//IE 解绑方式
divs[3].attachEvent('onclick',fn1);
function fn1(){
alert(33);
divs[3].detachEvent('onclick',fn1)；
}
兼容性移除函数：
function removeEventListener(element,eventName,fn) {
//判断当前浏览器是否支持removeEventListener方法
if (element.removeListener) {
element.removeEventListener(eventName,fn);
} else if (element.detachEvent) {
element.detachEvent('on'+ eventName,fn);
} else {
element['on'+eventName] = null;
}
}
attachEvent 事件
主要用于IE8及以前版本，做个了解就行。
DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点间按照特定顺序进行传播，这个传播过程叫做DOM事件流。分为冒泡与捕获两个阶段。
冒泡与调用
1 .js中只能执行或者捕获的其中一个阶段
2 .onclick和attachEvent只能得到冒泡阶段
3 .addEventListener(type,listener[,useCapture]) 第三个参数
如果是 true 表示在事件捕获阶段调用处理程序，
如果是false（默认）或者省略表示 在事件 冒泡阶段 调用程序。
4 .开发中很少用捕获，更多是冒泡
5 .有的事件是没得冒泡的 比如：onblur，onfocus,onmouseenter,onmouseleave 。
事件对象 e
e是事件对象。放在侦听函数小括号里面，当作形参来看。事件对象是我们事件一系列相关的数据的集合，比如鼠标点击事件里面鼠标的坐标等。
funtcion(event) {
}
e.target 与this的区别
e.target 返回触发事件对象/元素
this返回绑定事件 对象
e.pageX e.pageY 获取坐标
兼容性写法：
e = e || window.event;
currentTarget 新写法，指向绑定这个事件的对象 ie678有兼容性问题
阻止默认行为
1.监听方式
e.preventDefault()
2.传统注册方式
2.1 e.preventDefault()
2.2 低版本浏览器 e.returmValue
2.3 return false 也能阻止默认行为，没有兼容问题，但是后面的代码不再执行。而且只限制与传统注册方式.
阻止冒泡
e.stopPropagation(); //一个方法
e.cancleBubble = true; //一个属性
判断程序：
if (e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancleBubble = true;
}
事件委托/绑定
给父元素设置事件，点击子元素的时候，子元素不用再单独设置，自动冒泡寻找父元素的操作。
var ul = document.querySelector('ul');
// ul.addEventListener('click',function(e) {
// console.log('1');
// e.target.style.backgroundColor = 'pink';
// })
ul.onclick = function (e) {
console.log('1');
e.target.style.backgroundColor = 'pink';
}
禁止选中文字和禁止右键菜单
contextmenu主要控制该如何显示上下文菜单，主要用于取消上下文菜单
document.addEventListener ('contextmenu',function(e){
e.preventDefault();
})
禁止鼠标选中
document.addEventListener('selectstart',function (e){
e.preventDefault();
})
获取鼠标坐标
document.addEventListener('click',function(e){
console.log(e.clientX);//可视区域的相对坐标
console.log(e.clientY);
//pageX
//screenX
})
跟随鼠标的图片
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove只要我们鼠标移动1px 就会触发这个事件
// console.log(1);
// 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
//3 . 千万不要忘记给left 和top 添加px 单位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});