JavaScript学习之路（WebAPIs阶段）

WebAPIs阶段

Web APIs 是 W3C 组织的标准
Web APIs 我们主要学习 DOM 和 BOM
Web APIs 是我们 JS 所独有的部分
我们主要学习页面交互功能
需要使用 JS 基础的课程内容做基础

API： API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框，直接使用 alert(‘弹出’)

API 和 Web API 总结:

API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
学习 Web API 可以结合前面学习内置对象方法的思路学习

DOM

什么是DOM?

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM树:

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

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

获取页面元素

根据标签id获取

    // 1. 因为我们文档页面从上往下加载，所以得先有标签 所以我们script写到标签的下面// 2. get 获得 element 元素 by 通过 驼峰命名法// 3. 参数 id是大小写敏感的字符串// 4. 返回的是一个元素对象var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer);

根据标签名获取

<body><div id="time">2021-11-12</div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ol id="ol"><li>6</li><li>7</li><li>8</li></ol><script>// 1. 返回的是 获取过来的元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li');console.log(lis);console.log(lis[0]);// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3. 如果页面中只有一个li 返回的还是伪数组的形式// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式// 5. element.getElementsByTagName('标签名');// var ol = document.getElementsByTagName('ol'); // [ol]// console.log(ol[0].getElementsByTagName('li'));var ol = document.getElementById('ol');console.log(ol.getElementsByTagName('li'));</script>
</body>

H5新增获取元素方式

<body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象// 切记 里面的选择器需要加符号 .box #navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);// 3. querySelectAll() 返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);</script>
</body>

获取特殊元素(body、html)

    // 1. 获取body元素var bodyEle = document.body;console.log(bodyEle);console.log(bodyEle);// 2. 获取html元素// var htmlEle = document.html;var htmlEle = document.documentElement;console.log(htmlEle);

给元素注册事件

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

事件源 (谁)
事件类型 (什么事件)
事件处理程序 (做啥)

<body><button id="btn">按钮</button><script>// 点击一个按钮，弹出对话框// 1. 事件是有三部分组成 事件源 事件类型 事件处理内容 也称为事件三要素// (1) 事件源 事件被触发的对象  谁 按钮var btn = document.getElementById('btn');// (2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下// (3) 事件处理程序 通过一个函数赋值的方式 完成btn.onclick = function() {alert('已点击');}</script>

事件执行的步骤：

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

常见的鼠标事件如下：

操作DOM的属性

操作元素

通过innerText 改变元素内容：

<body><style>div,p {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: pink;}</style><button id="btn">显示当前系统时间</button><div>某个时间</div><p>12345</p><script>// 当我们点击了按钮， div 里面的文字会发送变化// 1. 获取元素var btn = document.querySelector('button');var div = document.querySelector('div');// 2. 注册事件btn.onclick = function() {// div.innerText = '2021-11-12';div.innerText = getDate();}function getDate() {var date = new Date();// 我们写一个 2019年 5月 1日 星期三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();</script>
</body>

当你点击“显示当前系统时间” 按钮时会在指定div中显示当前系统时间，如图：

点击后：

innerText 和 innerHTML的区别 :

<body><div></div><p>我是文字<span>123</span></p><script>// 1. innerText 不识别html标签 非标准  去除空格和换行var div = document.querySelector('div');// div.innerText = '<strong>今天是：</strong> 2021';// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的div.innerHTML = '<strong>今天是：</strong> 2021';// 这两个属性是可读写的  可以获取元素里面的内容var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script>
</body>

点击按钮切换不同图片：

<body><button id="ldh">刘德华</button><button id="zxy">张学友</button> <br><img src="./images/ldh.jpg" alt="" title="刘德华" style="width: 600px;height: 398px;"><script>// 修改元素属性 src// 1. 获取元素var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');// 2. 注册事件  处理程序ldh.onclick = function() {img.src = './images/ldh.jpg';img.title = '刘德华';}zxy.onclick = function() {img.src = './images/zxy.jpg';img.title = '张学友';}</script>
</body>

分时问候案例：

<body><img src="./images/s.gif" style="width: 300px;" alt=""><div>上午好</div><script>// 根据系统不同时间来判断，所以需要用到日期内置对象// 利用多分支语句来设置不同的图片// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性// 需要一个div元素，显示不同问候语，修改元素内容即可// 1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2. 得到当前的小时数var date = new Date();var h = date.getHours();// 3. 判断小时数改变图片和文字信息if(h < 12) {img.src = './images/s.gif';div.innerHTML = '亲，上午好！好好学习';} else if (h < 18) {img.src = './images/x.gif';div.innerHTML = '亲，下午好！好好学习';} else {img.src = './images/w.gif';div.innerHTML = '亲，晚上好！早点休息';}</script>
</body>

修改表单属性

<body><button>按钮</button><input type="text" value="请输入内容"><script>// 1. 获取元素var btn = document.querySelector('button');var input = document.querySelector('input');// 2. 注册事件 处理程序btn.onclick = function() {input.value = '已被点击';// btn.disabled = true;this.disabled = true; // 效果相同// this 指向的是事件函数的调用者}</script>
</body>

仿京东显示隐藏密码明文案例

    <style>.box {width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;position: relative;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box label img {position: absolute;width: 24px;top: 2px;right: 2px;}</style><body><div class="box"><label for=""><img src="./images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注册事件 处理程序var flag = 0;eye.onclick = function() {// 点击一次之后，flag 一定要变化if(flag == 0) {eye.src = './images/open.png';pwd.type = 'text';flag = 1; // 赋值操作} else {eye.src = './images/close.png';pwd.type = 'password';flag = 0;}}</script>
</body>

点击小眼睛前后的效果如下图所示：

点击后：

循环精灵图案例

<style>* {margin: 0;padding: 0;}li {list-style: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;background: url(./images/sprite.png) no-repeat;}
</style>
<body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1. 获取元素 所有的小livar lis = document.querySelectorAll('li');for(var i = 0; i < lis.length; i++) {// 让索引号 乘以44 就是每个li 的背景y坐标 index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -'+ index +'px';}</script>
</body>

显示如下：

显示隐藏文本框内容

<style>* {margin: 0;padding: 0;}input {color: #999;}</style>
<body><input type="text" value="手机"><script>// 1. 获取元素 var text = document.querySelector('input');// 2. 注册事件 获得焦点事件 onfocustext.onfocus = function() {if(this.value === '手机') {this.value = '';}// 获得焦点需要把文本框里面的文字颜色变黑text.style.color = '#000';}// 3. 注册事件 失去焦点事件 onblurtext.onblur = function() {if(this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字颜色变浅色text.style.color = '#ccc';}</script>
</body>

使用className修改样式属性(开发中这种用法较多)

<style>div {width: 100px;height: 100px;background-color: pink;}.change {width: 200px;background-color: purple;color: #008c8c;font-size: 25px;margin-top: 100px;}
</style>
<body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = '#fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器// this.className = 'change';this.className = 'first change';}</script>
</body>

密码框验证信息

    <style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(./images/mess.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(./images/wrong.png);}.right {color: green;background-image: url(./images/right.png);}</style>
<body><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(ipt.value.length < 6 || ipt.value.length > 16) {message.className = 'message wrong';message.innerHTML = '您输入的位数不对要求6~16位';} else {message.className = 'message right';message.innerHTML = '输入正确';}}</script>
</body>

操作元素总结:

排他思想

首先排除其他人，然后才设置自己的样式这种排除其他人的思想我们称为排他思想

<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1. 获取所有按钮元素var btns = document.getElementsByTagName('button');// btns得到的是伪数组 里面的每一个元素 btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// (1) 先把所有按钮背景颜色去掉 干掉所有人for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// (2) 然后才让当前的元素背景颜色为pink 留下我自己this.style.backgroundColor = 'pink';}}</script>
</body>

百度换肤效果案例

<style>* {margin: 0;padding: 0;}body {background: url(./images/1.jpg) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style>
<body><ul class="baidu"><li><img src="./images/1.jpg" alt=""></li><li><img src="./images/2.jpg" alt=""></li><li><img src="./images/3.jpg" alt=""></li><li><img src="./images/4.jpg" alt=""></li></ul><script>// 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// 2. 循环注册事件for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我们点击图片的路径  images/2.jpg// 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage= 'url('+ this.src +')';}}</script>
</body>

自定义属性操作

<body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1. 获取元素的属性值// (1) element.属性console.log(div.id);//(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('id'));console.log(div.getAttribute('index'));// 2. 设置元素属性值// (1) element.属性= '值'div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性', '值');  主要针对于自定义属性div.setAttribute('index', 2);div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className// 3 移除属性 removeAttribute(属性)    div.removeAttribute('index');</script>
</body>

H5自定义属性

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

设置H5自定义属性

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

比如

或者使用 JS 设置
element.setAttribute(‘data-index’, 2)

操作DOM节点

利用 DOM 提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector 等
逻辑性不强、繁琐

利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差

删除留言案例

<style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a {float: right;text-decoration: none;}</style><body><textarea name="" id=""></textarea><button>发布</button><ul></ul><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 {// (1) 创建元素var li = document.createElement('li');// 先有li 才能赋值  href ='javascript:;' 可以阻止链接跳转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>
</body>

三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()

区别：

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

DOM 重点核心

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

document.write
innerHTML
createElement

appendChild
insertBefore

removeChild

修改元素属性： src、href、title等
修改普通元素内容： innerHTML 、innerText
修改表单元素： value、type、disabled等
修改元素样式： style、className

主要获取查询dom的元素

DOM提供的API 方法： getElementById、getElementsByTagName 古老用法不太推荐
H5提供的新方法： querySelector、querySelectorAll 提倡
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

属性操作

主要针对于自定义属性。

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性

事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序

注册事件的两种方式

传统方式：

利用 on 开头的事件
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册事件的处理函数将会覆盖前面注册的处理函数

方法监听注册方式：

eventTarget.addEventListener(type, listener[, useCapture])

w3c标准推荐方式
addEventListener() 它是一个方法
IE9之前的IE不支持此方法，可使用attachEvent() 代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

<body><button>传统注册事件</button><button>方法监听注册事件</button><button>IE9 attachEvent</button><script>var btns = document.querySelectorAll('button');// 1. 传统注册事件btns[0].onclick = function() {alert('hi');}btns[0].onclick = function() {alert('你好');}// 2. 事件侦听注册事件  addEventListener// (1) 里面的事件类型是字符串 必定加引号 而且不带on// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）btns[1].addEventListener('click',function() {alert('你好吗');})btns[1].addEventListener('click',function() {alert('你好不好');})// 3. attachEvent IE9以前的版本支持btns[2].attachEvent('onclick',function() {alert(11);})</script>
</body>

注册事件兼容性解决方案

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;}
// 兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器

删除事件（解绑事件）

传统注册方式:

eventTarget.onclick = null;

方法监听注册方式:

eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);

<body><div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);// 1. 传统方式删除事件divs[0].onclick = null;}// 2. removeEventListener 删除事件// divs[1].addEventListener('click',fn); // 里面的fn 不需要调用加小括号function fn() {alert(22);divs[1].removeEventListener('click',fn);}// 3. detachEventdivs[2].attachEvent('onclick',fn1);function fn1() {alert(33);divs[2].detachEvent('onclick',fn1);}</script>
</body>

删除事件兼容性解决方案

 function removeEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 removeEventListener 方法if (element.removeEventListener) {element.removeEventListener(eventName, fn);  // 第三个参数 默认是false} else if (element.detachEvent) {element.detachEvent('on' + eventName, fn);} else {element['on' + eventName] = null;}

DOM事件流

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

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

DOM事件流代码验证：

    <style>.father {overflow: hidden;width: 200px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;}.son {width: 100px;height: 100px;background-color: blueviolet;line-height: 100px;margin: 50px;}</style><body><div class="father"><div class="son">son盒子</div></div><script>// dom事件流 三个阶段// 1. JS代码只能执行捕获或者冒泡其中的一个阶段// 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 // document -> html -> body -> father -> sonvar son = document.querySelector('.son');son.addEventListener('click',function() {alert('son');},true);var father = document.querySelector('.father');father.addEventListener('click',function() {alert('father');},true);// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false);document.addEventListener('click', function() {alert('document');})</script>
</body>

注意：

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

事件对象

什么是事件对象？

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

事件对象的使用语法

eventTarget.onclick = function(event) {// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt } eventTarget.addEventListener('click', function(event) {// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt }）

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

事件对象的兼容性方案:

var div = document.querySelector('div');div.onclick = function(e) {console.log(e);console.log(window.event);e = e || window.event;}// div.addEventListener('click',function(e) {//     console.log(e);// })

事件对象 e.target

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

    <style>div {width: 100px;height: 100px;background-color: pink;}</style><body><div>123</div><ul><li>abc</li><li>abc</li><li>abc</li></ul><script>// 常见事件对象的属性和方法// 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）// 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁var div = document.querySelector('div');div.addEventListener('click', function(e) {console.log(e.target);console.log(this);})var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// 我们给ul 绑定了事件  那么this 就指向ul  console.log(this);console.log(e.currentTarget);// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是liconsole.log(e.target);})// 了解兼容性// div.onclick = function(e) {//     e = e || window.event;//     var target = e.target || e.srcElement;//     console.log(target);// }// 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识</script>
</body>

事件对象阻止默认行为

<body>
<div>123</div><a href="http://www.baidu.com">百度</a><form action="http://www.baidu.com"><input type="submit" value="提交" name="sub"></form><script>// 常见事件对象的属性和方法// 1. 返回事件类型var div = document.querySelector('div');div.addEventListener('click', fn);div.addEventListener('mouseover', fn);div.addEventListener('mouseout', fn);function fn(e) {console.log(e.type);}// 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交var a = document.querySelector('a');a.addEventListener('click', function(e) {e.preventDefault(); //  dom 标准写法})// 3. 传统的注册方式a.onclick = function(e) {// 普通浏览器 e.preventDefault();  方法// e.preventDefault();// 低版本浏览器 ie678  returnValue  属性// e.returnValue;// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式return false;alert(11);}</script>
</body>

阻止事件冒泡

两种方式：

<body><div class="father"><div class="son">son盒子</div></div><script>// 常见对象的属性和方法// 阻止冒泡 dom 推荐的标准 stopPropagation()var son = document.querySelector('.son');son.addEventListener('click', function(e) {alert('son');e.stopPropagation(); // stop 停止 Propagation 传播e.cancelBubble = true; // cancel 取消 Bubble 泡泡}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false);document.addEventListener('click', function() {alert('document');})</script>
</body>

事件委托（代理、委派）

事件委托的原理

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

事件委托的作用

我们只操作了一次DOM，提高了程序的性能。

<body><ul><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li></ul><script>// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// alert('知否知否，点我应有弹框在手！');// e.target 这个可以得到我们点击的对象e.target.style.backgroundColor = 'pink';})</script>
</body>

禁止选中文字和禁止右键菜单

<body>我是一段不愿意分享的文字<script>// 1. contextmenu 我们可以禁用右键菜单document.addEventListener('contextmenu', function(e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();})</script>
</body>

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

    <script>// 鼠标事件对象 MouseEventdocument.addEventListener('click',function(e) {// 1. client 鼠标在可视区的x和y坐标console.log(e.clientX);console.log(e.clientY);console.log('----------------------');// 2. page 鼠标在页面文档的x和y坐标console.log(e.pageX);console.log(e.pageY);console.log('----------------------');// 2. screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);console.log(e.screenY);})</script>

跟随鼠标的天使案例：

<style>img {position: absolute;}</style><body><img src="./images/angel.gif" alt=""><script>var pic = document.querySelector('img');document.addEventListener('mousemove',function(e) {// 1. mousemove 只要我们鼠标移动1px 就会触发这个事件// 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 - pic.width/2 + 'px';pic.style.top = y - pic.height/2 + 'px';});</script>
</body>

键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

常用键盘事件

    <script>// 常用的键盘事件//1. keyup 按键弹起的时候触发 // document.onkeyup = function() {//         console.log('我弹起了');//     }document.addEventListener('keyup', function() {console.log('我弹起了');})//3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊document.addEventListener('keypress', function() {console.log('我按下了press');})//2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊document.addEventListener('keydown', function() {console.log('我按下了down');})// 4. 三个事件的执行顺序  keydown -- keypress -- keyup</script>

键盘事件对象

    <script>// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值// 1. keydown 和 keyup  不区分字母大小写  a 和 A 得到的都是65  它能识别所有的键（包括功能键）// 2. keypress事件 区分字母大小写  不识别功能键document.addEventListener('keyup',function(e) {// console.log(e);console.log('up:' + e.keyCode);// 我们可以利用keyCode返回的ASCII码值来判断用户按下了哪个键if (e.keyCode === 65) {alert('您按下了a键');} else {alert('您没有按下a键');}})document.addEventListener('keypress',function(e) {console.log('press:' + e.keyCode);})</script>

模仿京东快递单号查询：

    <style>* {margin: 0;padding: 0;}.search {position: relative;width: 178px;margin: 100px;}.con {display: none;position: absolute;top: -40px;width: 171px;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2);padding: 5px 0;font-size: 18px;line-height: 20px;color: #333;}.con::before {content:'';width: 0;height: 0;position: absolute;top: 28px;left: 18px;border: 8px solid #000;border-style: solid dashed dashed;border-color: #fff transparent transparent;}</style><body><div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class="jd"></div><script>// 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）// 表单检测用户输入： 给表单添加键盘事件// 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容// 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子var con = document.querySelector('.con');var jd_input = document.querySelector('input');jd_input.addEventListener('keyup',function() {// console.log('输入了内容');if(this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})// 当我们失去焦点，就隐藏这个con盒子jd_input.addEventListener('blur',function() {con.style.display = 'none';})// 当我们获得焦点，就显示这个con盒子jd_input.addEventListener('focus',function() {if (this.value !== '') {con.style.display = 'block';}})</script>
</body>