注册事件的两种方式
on+事件名称
onclick、onmouseover这种on+事件名称的方式注册事件几乎所有的浏览器都支持。
注册事件：
box.onclick = function(){ //事件处理程序 }移除事件：
box.onclick = null;
on+事件名称注册事件的缺点：
同一个元素同一类型的事件，只能注册一个，如果注册了多个，会出现覆盖问题。
注册事件的新方式
addEventListener与removeEventListener
现代浏览器支持的注册事件的新方式，这种方式注册的事件不会出现覆盖问题。
addEventListener的语法
//第一个参数：事件的类型：click mouseover //第二个参数：函数，监听者，每次点击，这个函数就执行。 //第三个参数：是否使用捕获，默认为false，表示冒泡 addEventListener(type, func, useCapture);
tips：如果想要让你注册的事件能够移除，不能使用匿名函数。
function fn1() { alert("hehe"); } //如果想让注册的事件能移除，不能用匿名函数。 box.addEventListener("click", fn1, false);removeEventListen的语法
//第一个参数：参数类型 //第二个参数：要移除的那个函数 //第三个参数：false removeEventListener(type, func, useCapture);
attachEvent与detachEvent（了解）
IE678不支持addEventListener与removeEventListen两个方法，但是支持attachEvent与detachEvnet
attachEvent的用法：
//type:事件类型 需要加上on onclick onmouseenter //func:需要执行的那个事件 attachEvent(type, func)
detachEvent的用法
//type:事件类型 需要加上on onclick onmouseenter //func:需要执行的那个事件 detachEvent(type, func)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 注册事件 on+事件名= function(){} // 问题： 给同一个元素注册同一个事件多次，后面的会覆盖前面 /*document.onclick = function () { console.log(1); } document.onclick = function () { console.log(2); }*/ // addEventListener(); // 添加事件监听 说白了就是在注册事件 // addEventListener(type, fn, useCapture); // type: 事件名 事件名不带on click mouseover // fn： 事件处理函数 // useCapture: 暂时不用管，省略不写。 // addEventListener 在注册事件的时候，是不存在覆盖问题。 document.addEventListener("click", function(){ console.log(3); }) document.addEventListener("click", function(){ console.log(4); }) // 注册事件的两种方式 // 1. on+事件名 = function(){} 存在： 同一个元素注册同一个事件多次，后面的覆盖前面的 // 2. addEventListener来注册 不存在覆盖问题 IE678不兼容 // addEventListener(事件名, 事件处理函数) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 解绑事件: 注册的事件不需要了 // 1. on注册的事件 // 语法 on+事件名 = null; // 需求：点击document，打印1，只会打印一次 /*document.onclick = function () { console.log(1); // 点击了就会解绑该事件 document.onclick = null; }*/ // 2. addEventListener注册的事件该如何解绑 // addEventListener 注册的事件需要使用对应removeEventListener方法来解绑 // 注意：以下使用addEventListener注册事件的写法是没有办法解绑，因为事件处理函数是个匿名函数 // document.addEventListener("click", function () { // console.log(123); // }) // 以下使用addEventListener注册事件的写法是可以来解绑 // 做法： 把匿名函数放到外面，给其一个函数名即可。 var fn = function () { console.log(123456); document.removeEventListener("click", fn); }; document.addEventListener("click", fn); // removeEventListener 语法 // removeEventListener(type, fn, useCapture) // type 解绑事件名 // fn 事件处理函数 不能是匿名函数，否则无法解绑 // useCapture 忽略不管 // 没有解绑 /*document.removeEventListener("click", function () { console.log(123); });*/ // addEventListener 注册的事件on这种方式无法解绑 // document.onclick = null; // addEventListener 注册的事件不存在覆盖问题 // document.addEventListener("click", null); // 小结： // 解绑事件也有两种方式 // 1. on注册的事件，该如何解绑 on+事件名 = null; // 2. addEventListener 注册的事件，该如何解绑 // 需要removeEventListener来解绑，不能是匿名函数，否则无法解绑的。 // 为了可以解绑事件： 把匿名函数放到外面，加上函数名 </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // IE678中 // attachEvent(eventType, function) 注册事件 // detachEvent(eventType, function) 解绑事件 // eventType 事件名 要带on var fn = function () { console.log(123); } document.attachEvent("onclick", fn); document.detachEvent("onclick", fn); </script> </body> </html>事件对象
事件对象的概述
在触发某个事件的时候，都会产生一个事件对象Event，这个对象中包含所有与事件相关的一些信息，包括触发事件的元素，事件的类型以及其他与事件相关的信息。
鼠标事件触发时，事件对象中会包含鼠标的位置信息。
键盘事件触发时，事件对象中会包含按下的键相关的信息。
每一个事件在触发时，都会产生一个事件对象。 你见或者不见，我就在那里，不悲不喜。 你爱或者不爱，爱就在那里，不增不减。 你用或者不用，我都会给你，不离不弃。
获取事件对象
既然事件对象中存储了这么多的信息，我们首先需要做的就是获取到这个事件对象。
获取事件对象非常的简单，只需要在注册事件的时候，指定一个形参即可。这个形参就是我们想要获取到的事件对象。
btn.onclick = function(event){ //event就是事件对象，里面包含了事件触发时的一些信息。 console.log(event); }事件对象的常用属性
事件对象中有很多很多的属性，但是很多属性并不常用。我们经常用到的是鼠标位置信息和键盘码相关的信息。
记录了鼠标位置信息的相关属性
screenX与screenY：光标相对于屏幕左上角的水平位置与垂直位置。 clientX与clientY：光标相对于可视区左上角的水平位置和垂直位置。 pageX与pageY：光标相对于网页（文档document）左上角的水平位置与垂直位置（推荐使用）
【案例:让小天使飞.html】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ /*height: 4000px;*/ } </style> </head> <body> <img src="images/tianshi.gif" alt=""> <script> // 需求：当鼠标在页面中移动的时候，让图片跟随鼠标移动 // 把鼠标的位置获取到，设置给图片，鼠标的位置作为图片的left、top // onmousemove： 当鼠标移动的时候触发 /*document.onmousemove = function () { console.log("动了"); }*/ var ts = document.querySelector("img"); document.onmousemove = function (e) { // 元素的left、top样式要起效果，元素必须要有定位 ts.style.position = "absolute"; // // 把鼠标到可视区的位置获取到设置给了图片 // ts.style.left = e.clientX + "px"; // ts.style.top = e.clientY + "px"; // 把鼠标到页面的位置获取到设置给了图片 // 当没有滚动条的时候，使用pageX和clientX是一样效果 // 当有滚动条 的时候，需要使用pageX Y // 综合来看，推荐使用pageX pageY ts.style.left = e.pageX + "px"; ts.style.top = e.pageY + "px"; } </script> </body> </html>tianshi.gif如下图
记录了键盘码的属性
获取键盘码: 在键盘事件中，通过e.keyCode可以获取到按下的键盘码
【微博评论-添加回车发送功能】
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 660px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; } input { float: right; } </style> </head> <body> <div class="box" id="weibo"> <span>微博发布</span> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">发布</button> <ul id="ul"></ul> </div> <script> // 思路： // 1. 找对象（txt、btn、ul） // 2. btn注册click // 3. 创建li元素，添加到ul中(insertBefore 添加到第一位之前) // 4. 给li设置内容，内容来源于txt的内容 // 5. 创建一个button // 6. 设置button的内容 <button>删除</button> innerText // 7. 给删除按钮注册click // 8. 点击的时候删除当前对应的li元素 removeChild // 9. 把按钮添加到li中 // 细节处理 // 1. 如果txt没有输入内容，点击按钮，阻止创建li添加到ul中 // 1. var txt = document.querySelector("#txt"); var btn = document.querySelector("#btn"); var ul = document.querySelector("#ul"); // 2. btn.onclick = function () { // text变量存储txt的内容 // trim() ==> 去除字符串两端的空白 var text = txt.value.trim(); // 在获取到内容之后就可以清空文本域了 txt.value = ""; // 判断txt是否有输入内容 if (text.length === 0) { // 啥都没写，底下代码不执行 return; } // 3. var newLi = document.createElement("li"); ul.insertBefore(newLi, ul.firstElementChild); // 4. newLi.innerText = text; // 5. var delBtn = document.createElement("button"); // 6. delBtn.innerText = "删除"; // 设置按钮的样式右浮动 delBtn.style.float = "right"; // 7. delBtn.onclick = function () { // 8. // parent.removeChild(child); // child ==> this.parentNode; // parent ==> ul ul.removeChild(this.parentNode); } // 9 newLi.appendChild(delBtn); } // 添加回车发布功能 // 给txt注册键盘事件 txt.onkeyup = function (e) { // 需要知道摁了什么键 if(e.keyCode === 13){ // 回车 ==> 发布 ==> 就像点击了发布按钮一样 btn.onclick(); // 把btn的点击事件给调用了。 } } </script> </body> </html>offset系列
offsetHeight与offsetWidth
offsetHeight与offsetWidth
1. 获取的是元素真实的高度和宽度 2. 获取到的是数值类型，方便计算 3. offsetHeight与offsetWidth是只读属性，不能设置。
获取宽度和高度offsetWidth与offsetHeight
offsetParent
parentNode和offsetParent
1. parentNode始终是父元素 2. offsetParent是离当前元素最近的定位元素(absolute、relative)，如果没有，那就找body
offsetLeft与offsetTop
offsetLeft: 自身左侧到offsetParent左侧的距离；
offsetTop:自身顶部到offsetParent顶部的距离；
1. 元素自身与offsetParent真实的距离 2. 获取到的是数值类型，方便计算 3. 只读属性，只能获取，不能设置
拖拽特效
【可拖拽的盒子.html】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: #f99; cursor: move; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div></div> <script> // 拖拽过程 // 1. 鼠标在div上摁住不松手 // 2. 鼠标在页面中移动，div跟随鼠标移动 // 3. 鼠标在页面中松手了，div就不会跟随鼠标移动了 // onmousedown 当鼠标摁住的时候触发 // onmouseup 当鼠标抬起的时候触发 // onmousemove 当鼠标移动的时候触发 var box = document.querySelector("div"); // 解决bug的思路： // 当鼠标在div上摁下去的，获取x，y（鼠标到div内的距离） // x = 鼠标摁下去的鼠标到页面的距离 - div到页面的距离 // div到页面的距离 ==> offsetLeft offsetTop // 1. box.onmousedown = function(e) { console.log("摁下去了"); var x = e.pageX - box.offsetLeft; var y = e.pageY - box.offsetTop; // console.log(x, y); // 2. 把onmousemove放到 onmousedown里面 // 表示只有摁下去了才可以移动 document.onmousemove = function(e) { console.log("div跟随鼠标动了"); // 真的是需要让divdiv跟随鼠标移动（left、top） ==> 把鼠标的位置获取到设置给div的left、top box.style.left = e.pageX - x + "px"; box.style.top = e.pageY - y + "px"; } } // 3. document.onmouseup = function() { console.log("松手了"); // 当松手了，需要把onmousemove解绑掉 document.onmousemove = null; } // 小结： // 1. 鼠标在div上摁下去 onmousedown // 2. 鼠标在页面中移动 onmousemove // 注意点：必须是摁住的时候才可以移动 // 需要把onmousemove的代码放到onmousedown事件里面 // // 把鼠标的位置获取到，设置给div的left。top。 // // 3. 鼠标在页面上松手 onmouseup // 注意点：鼠标抬起了，onmousemove事件就不要了，就需要解绑 // document.onmousemove = null; </script> </body> </html>放大镜效果（案例）
放大镜在开发中是一个很常见的特效，但是所有的放大镜的实现效果都是一样。
【案例-07-放大镜特效】
实现思路：
1. 给box注册onmouseover事件，让big和mask显示 2. 给box注册onmouseout事件，让big和mask隐藏 3. 给box注册onmousemove事件，获取鼠标在box中的位置，让mask跟着移动 4. 限定mask的移动范围 5. 根据比例让bigImg跟着移动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; cursor: move; display: none; } .small { position: relative; } .box img { vertical-align: top; } #bigBox img { position: absolute; } </style> </head> <body> <div class="box" id="box"> <div id="smallBox" class="small"> <img src="images/001.jpg" width="350" alt=""/> <div id="mask" class="mask"></div> </div> <div id="bigBox" class="big"> <img src="images/0001.jpg" width="800" alt=""/> </div> </div> <script> //1. 给smallbox注册onmouseover事件, 显示mask和bigBox //2. 给smallbox注册onmouseout事件， 隐藏mask和bigBox //3. 给smallbox注册onmousemove事件，让mask和bigImg跟着动 var box = document.getElementById("box"); var smallBox = document.getElementById("smallBox"); var mask = document.getElementById("mask"); var bigBox = document.getElementById("bigBox"); var bigImg = document.querySelector(".big img"); smallBox.onmouseover = function () { mask.style.display = "block"; bigBox.style.display = "block"; } smallBox.onmouseout = function () { mask.style.display = "none"; bigBox.style.display = "none"; } //给smallbox注册移动事件， 只要smallbox中移动，才会触发 smallBox.onmousemove = function (e) { //1. 移动mask //1.1 获取鼠标在smallbox中的位置z var spaceX = e.clientX - box.offsetLeft; var spaceY = e.clientY - box.offsetTop; //给mask设置 var x = spaceX - mask.offsetWidth/2; var y = spaceY - mask.offsetHeight/2; console.log(x, y); //限制x和y的取值 if(x < 0) { x = 0; } if(y < 0) { y = 0; } if(x > smallBox.offsetWidth - mask.offsetWidth) { x = smallBox.offsetWidth - mask.offsetWidth; } if(y > smallBox.offsetHeight - mask.offsetHeight) { y = smallBox.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px"; //2. 移动bigImg //我10分钟能吃10个小笼包 东芹10分钟能吃100个小笼包 // 我吃完第5个的时候， 东芹要吃完多少个 // 我现在吃的包子数/我能吃的总包子数 = 东芹吃的包子数/东芹能吃的总得包子数 // mask当前移动的值 / mask能移动的总值 = 大图片当前移动的值 / 大图片能移动的总值。 bigImg.style.left = - x / (smallBox.offsetWidth - mask.offsetWidth) * (bigImg.offsetWidth - bigBox.offsetWidth) + "px"; bigImg.style.top = - y / (smallBox.offsetHeight - mask.offsetHeight) * (bigImg.offsetHeight - bigBox.offsetHeight) + "px"; } </script> </body> </html>001.jpg如下图
0001.jpg如下图
事件流
事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
说白了就是：当我们触发了子元素的某个事件后，父元素对应的事件也会触发。
事件捕获（了解）
事件捕获是火狐浏览器提出来的，IE678不支持事件捕获（基本上，我们都是用事件冒泡） 事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递
//当addEventListener第三个参数为true时，表示事件捕获 arr[i].addEventListener("click", function () { console.log(this); },true);事件的三个阶段
事件的捕获阶段
事件的目标阶段（触发自己的事件）
事件的冒泡阶段
事件有三个阶段，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段，让addEventLinstener第三个参数为true时，表示该事件在捕获阶段发生，如果第三个参数为false，表示该事件在冒泡阶段发生。
阻止事件冒泡
通过e.stopPropagation()方法可以阻止事件冒泡
【案例：登录框】
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { padding: 0px; margin: 0px; } .login { width: 512px; height: 280px; position: absolute; left: 0; right: 0; border: #ebebeb solid 1px; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; display: none; } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; /* 火狐 */ /* -moz-user-select: none; */ /*webkit浏览器*/ /* -webkit-user-select: none; */ /*IE10*/ /* -ms-user-select: none; */ /*早期浏览器*/ /* -khtml-user-select: none; */ /* user-select: none; */ } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: #000000; filter: alpha(opacity=30); opacity: 0.3; display: none; } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; z-index: 99; cursor: pointer; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登录会员 <span id="closeBtn">关闭</span></div> <div class="login-input-content"> <div class="login-input"> <label>用户名：</label> <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登录密码：</label> <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div> </div> <script> // 功能 // 1. 点击link，显示login // 2. 点击closeBtn， 隐藏login // 3. 点击document， 隐藏login var link = document.querySelector("#link"); var closeBtn = document.querySelector("#closeBtn"); var login = document.querySelector("#login"); // 功能1 link.onclick = function (e) { login.style.display = "block"; console.log("show"); // 在点击link的时候，来阻止事件冒泡 e.stopPropagation(); } // 功能2 closeBtn.onclick = function () { login.style.display = "none"; } // 功能3： document.onclick = function () { login.style.display = "none"; console.log("hide"); } login.onclick = function (e) { // 目的是为了点击login的时候，阻止事件冒泡到document上 e.stopPropagation(); } </script> </body> </html>事件补充：阻止浏览器默认行为
阻止浏览器默认行为除了使用 return false。
还可以通过 e.preventDefault() 可以阻止浏览器的默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="http://www.baidu.com">百度一下</a> <script> // 浏览器的默认行为： // 1. a链接的点击跳转行为 // 2. 表单的提交按钮 // 3. 浏览器图片默认可以拖拽 // 阻止浏览器的默认行为： 事件对象e.preventDefault(); // 阻止a链接的点击跳转行为 // 1. href = "javascript:void(0);" // 2. return false // 3. e.preventDefault(); // 第一种做法：只能用于阻止a链接跳转 // 后面两种做法可以用于浏览器的其他默认行为。 // return false 对于使用addEventListener注册的事件是没有办法是不能来阻止默认行为的。 var link = document.querySelector("a"); link.addEventListener("click", function (e) { console.log(1111); // e.preventDefault(); return false; }) /*var link = document.querySelector("a"); link.onclick = function (e) { e.preventDefault(); console.log(123); }*/ </script> </body> </html>常见的事件
常见的鼠标事件
onmousedown:鼠标按下事件
onmouseup:鼠标弹起事件
onclick:单击事件
ondblclick：双击事件
onmouseover：鼠标经过事件
onmouseout：鼠标离开事件
onmousemove：鼠标移动事件
onfocus：鼠标获得焦点事件
onblur：鼠标失去焦点事件
常见的键盘事件
onkeydown:键盘按下时触发
onkeyup:键盘弹起时触发
对于鼠标事件，事件对象中有一系列的XY记录了鼠标的位置信息。
键盘事件中，事件对象有一个event.keyCode属性，记录了按下去的键的键盘码
