第十一节 JS事件基础
空白点击事件(没什么用处,做个介绍)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击</title> <style> body{ border: 1px solid black; } </style> <script> window.onload = function(){ // document.body.onclick = function(){ //当界面什么也不写时,设置一个body点击事件, // alert('a'); //该句未被执行 // }; //但是当“body”内加入一个<button>之后,就算不点击按钮,而是点击空白区域(但是空白区域必须是按钮“aaa”所在的行,给 //body加上边框后就很容易看到了),也会有“a”弹出。其实不放东西点击事件没反应的原因是,当body内什么也不放时,body //实际区域大小为0,而不是整个空白区域,所以点击失效。 //当我们想在任意(空白/非空白)区域点击都会相应点击事件时,我们只需如下改进 document.onclick = function(){ alert('a'); }; }; </script> </head> <body> <button>aaa</button> </body> </html>
event对象和事件冒泡
什么是event对象
用来获取事件的详细信息:鼠标位置、键盘按键
例子:获取鼠标位置:clientX
document的本质:用“document.childNodes[0].tagName”获取:其实document相当于网页的最大标签,是“<!DOCTYPE html>“和”<html lang="en">...</html>”两个标签共同的父级,其中“<html>”标签中放的的我们写的内容,所以上面“空白点击事件”中只有给 document 加 onclick 才能实现点击事件的响应,所以之后做开发时,保证网页最大的通用性,我们需要给document加上点击事件。
获取event对象(兼容性写法)
var oEvent=ev||event;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取鼠标位置</title> <script> window.onload = function () { document.onclick = function(ev){ //IE浏览器 上面function() 无参数 // alert(event.clientX); //获取鼠标横坐标的值,其中原点位置为左上角,坐标为(0,0) // alert(event.clientX+','+event.clientY); //获取鼠标的横纵坐标,并用“,”隔开 //FF浏览器 上面function(ev) 有参数 // alert(ev.clientX+','+ev.clientY); //上述两段合并为 上面function(ev) 有参数 var oEvent = ev||event; alert(oEvent.clientX+','+oEvent.clientY); }; }; </script> </head> <body> </body> </html>
事件流:
事件冒泡:下面代码我们给三个div、body、html都添加了onclick事件,当我们点击任意一个标签时,除自身点击事件响应外,其父级及父级的父级都会响应点击事件,这就是所谓的“事件冒泡
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en" onclick="alert(this);"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <style> div{padding: 100px;} </style> </head> <body onclick="alert(this);"> <div style="background: #ccc;" onclick="alert(this.style.background);"> <div style="background: green;" onclick="alert(this.style.background);"> <div style="background: red;" onclick="alert(this.style.background);"></div> </div> </div> </body> </html>
取消冒泡
例子:仿select控件
DOM事件流
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿select下拉框</title> <style> #div1{ width: 400px; height: 300px; background: #cccccc; display: none; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getElementById('btn1'); // oBtn.onclick = function () { // oDiv.style.display = 'block'; // alert('点击按钮事件!'); // }; // document.onclick = function () { // oDiv.style.display = 'none'; // alert('document点击事件!'); // }; //如上述所写的,“按钮点击事件”结束后立即执行“document点击事件”,中间几乎看不到div的出现,这就是事件冒泡带给我们的困扰 //但是我们又想让弹出的div,在点击任意位置后隐藏,我们该怎么解决呢?我们重点是要取消冒泡,如下: oBtn.onclick = function (ev) { var oEvent = ev||event; oDiv.style.display = 'block'; oEvent.cancelBubble = true; //取消冒泡 }; document.onclick = function () { oDiv.style.display = 'none'; }; }; </script> </head> <body> <button id="btn1">显示</button> <div id="div1"></div> </body> </html>
鼠标事件
鼠标位置
可视区位置:clienX(鼠标横坐标)、clientY(鼠标纵坐标)
例子:跟随鼠标的Div
消除滚动条的影响
滚动条的意义:可视区域页面顶部的距离
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标坐标</title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; } </style> <script> document.onmousemove = function(ev){ var oEvent = ev||event; var oDiv = document.getElementById('div1'); // oDiv.style.left = oEvent.clientX+'px'; // oDiv.style.top = oEvent.clientY+'px'; //其中clientX和clientY为可视区坐标,在不设置body的“宽和高”时,div随着鼠标的移动而移动, //并且div的左上角始终与鼠标箭头的尖对齐; // //但是当我们有的body足够高和足够宽的时候,也就是出现滚动条的时候,当滚动条“只往下滚动”,div //和鼠标在纵坐标上发生偏移,出现“div左上角在上,鼠标在下的情况”,并且滚动条越往下,偏移越大; //同样,当滚动条“只往右滚动”,div和鼠标在横坐标上发生偏移,出现“div左上角在左,鼠标在右的情况”, //并且滚动条越往右,偏移越大;同理,当两个滚动条“都响应向下和向右滚动”时,div和鼠标在横坐标和纵坐 //标都发生偏移,出现“div左上角在左上,鼠标在右下的情况”,并且滚动条越往右和下,偏移越大; // //我们的解决办法是运动scrollTop和scrollLeft获取“可视区距离body顶端和左端的距离”,如下: var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.left = oEvent.clientX+scrollLeft+'px'; oDiv.style.top = oEvent.clientY+scrollTop+'px'; //所以我们之后在做开发时,在需要用到鼠标位置的时候,最好都加上scrollTop和scrollLeft以免出错 } </script> </head> <body style="height: 2000px; width: 2000px;"> <div id="div1"></div> </body> </html>
获取鼠标在页面的绝对位置
封装函数,把上述<script>标签内的内容进行改进封装:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//把上述<script>标签内的进行封装改进,如下: <script> //获取位置,函数封装 function getPos(ev){ var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } document.onmousemove = function(ev){ var oEvent = ev||event; var oDiv = document.getElementById('div1'); var pos = getPos(oEvent); oDiv.style.left = pos.x+'px'; oDiv.style.top = pos.y+'px'; } </script>
例子:一串跟随鼠标的Div
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一串跟着鼠标的div</title> <style> div{ width: 20px; height: 20px; background: red; position: absolute; } </style> <script> function getPos(ev){ var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } document.onmousemove = function (ev) { var oEvent = ev||event; var aDiv = document.getElementsByTagName('div'); var pos = getPos(oEvent); for (var i = aDiv.length - 1; i > 0; i--) { aDiv[i].style.left = aDiv[i-1].offsetLeft+'px'; aDiv[i].style.top = aDiv[i-1].offsetTop+'px'; } aDiv[0].style.left = pos.x+'px'; aDiv[0].style.top = pos.y+'px'; }; </script> </head> <body> <div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div><div></div> </body> </html>
键盘事件:
keyCode:获取用户按下键盘的哪个键
<script> document.onkeydown = function (ev) { var oEvent = ev||event; alert(oEvent.keyCode); //获取键盘每个键的编码值,具体键值编码,可参照ASCII码表 }; </script>
例子:键盘控制Div的移动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘控制div的移动</title> <style> #div1{ width: 100px; height: 100px; background-color: #cccccc; position: absolute; } </style> <script> document.onkeydown = function (ev) { var oEvent = ev||event; var oDiv = document.getElementById('div1'); if (oEvent.keyCode == 37) { //当按下左键时 oDiv.style.left = oDiv.offsetLeft-10+'px'; //div向左移动10像素 } else if (oEvent.keyCode == 39) { //当按下右键时 oDiv.style.left = oDiv.offsetLeft+10+'px'; //div向右移动10像素 } else if (oEvent.keyCode == 38) { //当按下上键时 oDiv.style.top = oDiv.offsetTop-10+'px'; //div向上移动10像素 } else if (oEvent.keyCode == 40) { //当按下下键时 oDiv.style.top = oDiv.offsetTop+10+'px'; //div向下移动10像素 } //细心的同学可能会发现,当按下按键不松开时,div会相应向前后左右“顿”一下后,在继续运动(这种情况普遍存在, //我们打字的时候也会出现这样的效果)但是我们如何让其不出现卡顿的情况呢?敬请解答! }; </script> </head> <body> <div id="div1"></div> </body> </html>
其他属性:
ctrlKey、shiftKey、altKey
例子:提交留言(Enter——提交;Ctrl+Enter——提交)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ctrl+Enter提交留言</title> <script> window.onload = function () { var oTxt1 = document.getElementById('txt1'); var oTxt2 = document.getElementById('txt2'); //当按下“Enter”键时提交留言 // oTxt1.onkeydown = function (ev) { // var oEvent = ev||event; // if (oEvent.keyCode == 13) { //当按下回车键 // oTxt2.value += oTxt1.value+'\n'; // oTxt1.value = ''; // // } // }; //当按下“Ctrl+Enter”键时提交留言 oTxt1.onkeydown = function (ev) { var oEvent = ev||event; if (oEvent.keyCode == 13 && oEvent.ctrlKey) { //当按下回车键 oTxt2.value += oTxt1.value+'\n'; oTxt1.value = ''; } }; }; </script> </head> <body> <input id="txt1" type="text"/> <!--<button id="btn1">提交留言</button>--> <textarea id="txt2" rows="10" cols="40"></textarea> </body> </html>
默认行为:浏览器自带的行为都叫默认行为,比如说:鼠标点击右键,会有对话框弹出等都是默认行为
阻止默认行为
普通写法:return false;
document.oncontextmenu = function () { //环境菜单/右键菜单
return false; //该句就是阻止右键菜单默认事件
};
例1:屏蔽右键菜单:弹出自定义右键菜单
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默认行为</title> <style> *{margin: 0; padding: 0; list-style: none;} #div1{ position: absolute; width: 80px; background: #cccccc; border: 1px solid black; display: none; } </style> <script> // document.oncontextmenu = function () { //环境菜单/右键菜单 // return false; //该句就是阻止右键菜单默认事件 // }; document.oncontextmenu = function (ev) { //环境菜单/右键菜单 var oEvent = ev||event; var oDiv = document.getElementById('div1'); oDiv.style.display = 'block'; oDiv.style.left = oEvent.clientX+'px'; oDiv.style.top = oEvent.clientY+'px'; return false; //该句就是阻止右键菜单默认事件 }; document.onclick = function () { var oDiv = document.getElementById('div1'); oDiv.style.display = 'none'; }; </script> </head> <body> <div id="div1"> <ul> <li>aaaaa</li> <li>sssss</li> <li>ccccc</li> <li>zzzzz</li> </ul> </div> </body> </html>
例2:只能输入数字的输入框:keydown、keyup事件的区别
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>只能输入数字的输入框</title> <script> window.onload = function () { var oTxt = document.getElementById('txt1'); //彻底禁止输入,所有的输入都被禁止 // oTxt.onkeydown = function () { // return false; // }; // oTxt.onkeydown = function (ev) { // var oEvent = ev||event; // // alert(oEvent.keyCode); //查看数字的编码,得出键盘上方的一排数字的ASCII码分别为: // // 0的ASCII码为48,9的ASCII码为57;小键盘中数字的ASCII码分别为:0~9:(96~105) // if (oEvent.keyCode<48||oEvent.keyCode>57){ // return false; // } // }; //上述功能存在的问题是,在中文拼音输入法下,由于拼音都是先打好字,然后“空格”键入,此时阻止不了, //但是不管中英文输入法,系统不能左右键移动插入,不能删除,不能修改,具有局限性,改进如下: //如果用户按的不是退格、也不是数字才阻止,但是只能键盘上面一排数字可以键入,小键盘数字和上下左右键请自行添加 oTxt.onkeydown = function (ev) { var oEvent = ev||event; if (oEvent.keyCode!=8 && (oEvent.keyCode<48||oEvent.keyCode>57)){ return false; } }; }; </script> </head> <body> <input type="text" id="txt1"/> </body> </html>
拖拽
简易拖拽
拖拽原理(距离不变、三个事件)
靠谱拖拽:
原有拖拽的问题:
直接给document加事件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离,鼠标的横坐标减去div的横坐标 var disY = 0; //记录纵向距离,鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) { var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; // oDiv.onmousemove = function (ev) { // var oEvent = ev||event; // // oDiv.style.left = oEvent.clientX-disX+'px'; // oDiv.style.top = oEvent.clientY-disY+'px'; // }; //只写上述两个事件的嵌套的话,会出现div像吸铁石一样当鼠标靠近,它会自动跑到鼠标下方, //而且就算不按下鼠标,慢慢移动,div就甩不掉,所以我们要加上下面一个事件,如下: // oDiv.onmouseup = function () { // oDiv.onmousemove = null; // oDiv.onmouseup = null; // }; //加上上面一个“up”事件,仍然存在一个小问题:当按下鼠标左键拖动div时,当鼠标“猛一下”快速移动, //div就会发生跟不上鼠标而“脱离”的情况,其实归根结底就是div太小了,所以鼠标容易脱离,但是我们把 //div放大又不现实,所以解决办法如下:把上面两个事件设为建立在document的事件(document足够大) document.onmousemove = function (ev) { var oEvent = ev||event; oDiv.style.left = oEvent.clientX-disX+'px'; oDiv.style.top = oEvent.clientY-disY+'px'; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
FF下,空div拖拽Bug:当上面的拖拽代码在火狐浏览器上运行时,由于div标签内没有放任何东西,所以拖拽第一次没什么问题,但当再一次拖拽时,div会出现一个带透明度的div框(像灵魂出窍/分身一样)跟着鼠标走,而原来的div在原地不动,当鼠标抬起,原来的div会瞬间平移到其“分身”里,并合并在一起。(目前火狐的版本已经修复)我们需要做的是,加上一句“return false;” //阻止默认事件,来组织火狐出现的Bug。如下:
防止拖出页面:上面拖拽代码就存在这样的问题,这样用户体验度会很差,因为如果该拖动窗口是一个登录页面时,如果用户拖拽的比较快,就有可能直接把“拖拽窗口”送出可视区域,而发生找不到“拖动窗口”的情况。所以我们需要“修正位置”。解决如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离,鼠标的横坐标减去div的横坐标 var disY = 0; //记录纵向距离,鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) { var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) { var oEvent = ev||event; var le = oEvent.clientX-disX; var to = oEvent.clientY-disY; var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度 var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度 if (le<0){ //如果left<0时,直接让其等于0,即让窗口从左边出不去 le = 0; } else if (le > ri) { le = ri; //页面可视区的宽度 减去 窗口宽度,即让窗口从右边出不去 } if(to<0) { to = 0; //让窗口从上边出不去 } else if (to > bo){ to = bo; //让窗口从下边出不去 } oDiv.style.left = le+'px'; oDiv.style.top = to+'px'; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; return false; //屏蔽掉FF中的bug(此处bug也相当于一个默认事件) }; }; </script> </head> <body> <div id="div1"></div> </body> </html>