WebAPI编程(事件高级,常用鼠标事件, 高阶函数,环境对象,排他操作)
WebAPI编程
1. 事件高级
1.1 注册事件（2种方式）
1.2 事件监听
addEventListener()事件监听（IE9以后支持）
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
attacheEvent()事件监听（IE678支持）
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
<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('hao a u'); } // 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序） btns[1].addEventListener('click', function() { alert(22); }) btns[1].addEventListener('click', function() { alert(33); }) // 3. attachEvent ie9以前的版本支持 btns[2].attachEvent('onclick', function() { alert(11); }) </script> 复制代码事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型：
案例：监听事件
<body> <div>哇哈哈</div> <input type="button" value="点击" /> <script type="text/javascript"> // 点击按钮弹出你好 // 1、获取元素： let btn = document.querySelector('input'); // 2、监听事件： // 回调函数：如果一个函数当做参数，这个函数我们称为回调函数 // 语法：元素.addEventListener('事件类型', function () {}); // click：单击事件 // dblclick：双击事件 btn.addEventListener('dblclick', function () { console.log('dakjhdkjsakdsa很多'); }); // 获取元素： let div = document.querySelector('div'); // 监听事件 div.addEventListener('click', function () { console.log('点了div啦'); div.style.background = 'red'; }); </script> </body> 复制代码1.3 删除事件（解绑事件）
<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. detachEvent divs[2].attachEvent('onclick', fn1); function fn1() { alert(33); divs[2].detachEvent('onclick', fn1); } </script> 复制代码删除事件兼容性解决方案
1.4. DOM事件流
html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。
那么是先执行父元素的单击事件，还是先执行div的单击事件
比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。
最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。
DOM 事件流会经历3个阶段：
捕获阶段
当前目标阶段
冒泡阶段
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
事件冒泡
<div class="father"> <div class="son">son盒子</div> </div> <script> // onclick 和 attachEvent（ie） 在冒泡阶段触发 // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 // son -> father ->body -> html -> document var son = document.querySelector('.son'); // 给son注册单击事件 son.addEventListener('click', function() { alert('son'); }, false); // 给father注册单击事件 var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, false); // 给document注册单击事件，省略第3个参数 document.addEventListener('click', function() { alert('document'); }) </script> 复制代码事件捕获
<div class="father"> <div class="son">son盒子</div> </div> <script> // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发 // document -> html -> body -> father -> son var son = document.querySelector('.son'); // 给son注册单击事件，第3个参数为true son.addEventListener('click', function() { alert('son'); }, true); var father = document.querySelector('.father'); // 给father注册单击事件，第3个参数为true father.addEventListener('click', function() { alert('father'); }, true); // 给document注册单击事件，第3个参数为true document.addEventListener('click', function() { alert('document'); }, true) </script> 复制代码1.5 事件对象
什么是事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：
谁绑定了这个事件。
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
事件对象的使用
事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参用来接收事件对象。
事件对象的兼容性处理
事件对象本身的获取存在兼容问题：
标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。
<div>123</div> <script> var div = document.querySelector('div'); div.onclick = function(e) { // 事件对象 e = e || window.event; console.log(e); } </script> 复制代码事件对象的属性和方法
e.target 和 this 的区别
this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
e.target 是事件触发的元素。
常情况下terget 和 this是一致，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
这时候this指向的是父元素，因为它是绑定事件的元素对象
而target指向的是子元素，因为他是触发事件的那个具体元素对象。
<div>123</div> <script> var div = document.querySelector('div'); div.addEventListener('click', function(e) { // e.target 和 this指向的都是div console.log(e.target); console.log(this); }); </script> 复制代码事件冒泡下的e.target和this
<ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { // 我们给ul 绑定了事件 那么this 就指向ul console.log(this); // ul // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li console.log(e.target); // li }); </script> 复制代码1.6 阻止默认行为
html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
<a href="http://www.baidu.com">百度</a> <script> // 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 = false; // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 return false; } </script> 复制代码1.7 阻止事件冒泡
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
<div class="father"> <div class="son">son儿子</div> </div> <script> var son = document.querySelector('.son'); // 给son注册单击事件 son.addEventListener('click', function(e) { alert('son'); e.stopPropagation(); // stop 停止 Propagation 传播 window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡 }, false); var father = document.querySelector('.father'); // 给father注册单击事件 father.addEventListener('click', function() { alert('father'); }, false); // 给document注册单击事件 document.addEventListener('click', function() { alert('document'); }) </script> 复制代码阻止事件冒泡的兼容性处理
1.8 事件委托
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
什么是事件委托
把事情委托给别人，代为处理。
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 生活中的代理：
js事件中的代理：
事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。
动态新创建的子元素，也拥有事件。
<ul> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> </ul> <script> // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { // e.target 这个可以得到我们点击的对象 e.target.style.backgroundColor = 'pink'; }) </script> 复制代码2. 常用鼠标事件
2.1 案例：禁止选中文字和禁止右键菜单
<body> 我是一段不愿意分享的文字 <script> // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', function(e) { e.preventDefault(); }) </script> </body> 复制代码2.2 鼠标事件对象
2.3 获取鼠标在页面的坐标
<script> // 鼠标事件对象 MouseEvent document.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('---------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX); console.log(e.screenY); }) </script> 复制代码2.4 案例：跟随鼠标的天使
<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 - 50 + 'px'; pic.style.top = y - 40 + 'px'; }); </script> 复制代码3. 高阶函数
高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。 值 就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
1.函数表达式
函数表达式和普通函数并无本质上的区别：
普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用
具名函数：（命名函數）
function fn () {} fn(); 复制代码匿名函数：
function () {} //函數也是值，也是数据 //函数表达式： let fun = function () {} let fun = function (a, b) { console.log(123, a, b); } 复制代码立即执行函数、自调用函数、自执行函数
(function () { console.log('aaa'); })() 复制代码2.回调函数
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码
作用:在需要的时候方便调用这段（回调函数）代码。
document.addEventListener('click', function () { console.log('回调函数'); }) setInterval( function () { console.log('哇哈哈'); }, 1000 ) 复制代码4. 环境对象
环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境作用：弄清楚this的指向，可以让我们代码更简洁
函数的调用方式不同，this指代的对象也不同
谁调用，this就是谁是判断this指向的粗略规则
直接调用函数，其实相当于是window.函数，所以this指代window
<body> <div>123</div> <input type="button" value="点击" /> <script type="text/javascript"> // console.log( this ); // 获取元素 let div = document.querySelector('div'); let input = document.querySelector('input'); div.addEventListener('click', function () { console.log(this, div); }); input.addEventListener('click', function () { console.log(this, input); }); document.addEventListener('click', function () { console.log(this, document); }); // console.log( this ); </script> </body> 复制代码5. 排他操作
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
所有元素全部清除样式（干掉其他人）
给当前元素设置样式 （留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己
<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> 复制代码综合案例 tab栏切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 1000px; height: 475px; margin: 0 auto; margin-top: 100px; } .tab { border: 1px solid #ddd; border-bottom: 0; height: 36px; width: 320px; } .tab li { position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer; border-top: 4px solid #fff; } .tab span { position: absolute; right: 0; top: 10px; background: #ddd; width: 1px; height: 14px; overflow: hidden; } .products { width: 1002px; border: 1px solid #ddd; height: 476px; } .products .main { float: left; display: none; } .products .main.active { display: block; } .tab li.active { border-color: red; border-bottom: 0; } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item active">国际大牌<span>◆</span></li> <li class="tab-item">国妆名牌<span>◆</span></li> <li class="tab-item">清洁用品<span>◆</span></li> <li class="tab-item">男士精品</li> </ul> <div class="products"> <div class="main active"> <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a> </div> <div class="main"> <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a> </div> <div class="main"> <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a> </div> <div class="main"> <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a> </div> </div> </div> <script type="text/javascript"> // 点击切换 // 点击（li）切换类名（active）、同时让对应的盒子显示（active） // 获取元素： let lis = document.querySelectorAll('.tab li');// lis = [li, li, li, li] let mains = document.querySelectorAll('.main');// mains = [div, div, div, div] // 监听事件 for ( let i = 0; i < lis.length; i++ ) { lis[i].addEventListener('click', function () { // 排他 for ( let j = 0; j < lis.length; j++ ) { lis[j].classList.remove('active'); mains[j].classList.remove('active'); } this.classList.add('active'); // ############################################## // for (let k = 0; k < mains.length; k++) { // mains[k].classList.remove('active'); // } mains[i].classList.add('active'); }); } </script> </body> </html> 复制代码扩展：
if：语句
如果if小括号里面是个变量，会样式转换为布尔值
如果if大括号里面的代码、只有一行，就可以省略大括号
作者：卡耐
链接：https://juejin.cn/post/7037774087799701518