空白点击事件（没什么用处，做个介绍）
<!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；
<!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事件，当我们点击任意一个标签时，除自身点击事件响应外，其父级及父级的父级都会响应点击事件，这就是所谓的“事件冒泡
<!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事件流
<!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
消除滚动条的影响
滚动条的意义：可视区域页面顶部的距离
<!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>标签内的内容进行改进封装：
//把上述<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
<!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的移动
<!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——提交）
<!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>第十一节 JS事件基础
原文地址：https://www.cnblogs.com/han-bky/p/10276540.html