1、鼠标在元素中移动时触发的事件：document.onmousemove
window.onload = function() {
// 获取当前的鼠标的位置
document.onmousemove = function(event) {
// 解决兼容问题：
event = event || window.event
console.log('鼠标距离页面左边的位置：', event.clientX)
}
}
2、当鼠标事件发生时，获取鼠标相对于可见窗口的水平坐标：clientX
3、当鼠标事件发生时，获取鼠标于可见窗口的垂直坐标：clientY
4、当鼠标事件发生时，获取鼠标相对于页面的水平坐标：pageX
5、当鼠标事件发生时，获取鼠标相对于页面的垂直坐标：pageY
6、获取滚动条滚动的距离：
-
chrome认为浏览器的滚动条是body的，可以通过document.body.scrollTop来获取
-
fireFox\IE认为浏览器的滚动条是html的，可以通过document.documentElement.scrollTop来获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box1-parent {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
#box1 {
/* 添加一个绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="box1-parent">
<div id="box1"></div>
</div>
<script>
// 需求：当前的box1跟随鼠标进行移动
window.onload = function() {
let box1Dom = document.getElementById("box1")
document.onmousemove = function(event) {
event = event || window.event
// 当可见区域小于box1-parent展示的区域时，会产生滚动条，这时需要对滚动的距离做处理
/**
* 获取滚动条滚动的距离：
* chrome认为浏览器的滚动条是body的，可以通过document.body.scrollTop来获取
* fireFox\IE认为浏览器的滚动条是html的，可以通过document.documentElement.scrollTop来获取
*/
let st = document.body.scrollTop || document.documentElement.scrollTop
let sl = document.body.scrollLeft || document.documentElement.scrollLeft
box1Dom.style.left = event.clientX + sl + 'px'
box1Dom.style.top = event.clientY + st + 'px'
}
}
</script>
</body>
</html>
7、事件冒泡（bubble）：
-
定义：事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。
-
阻止事件冒泡：event.cancelBubble = true
8、事件委派：
-
定义：将事件统一绑定到共同的父元素上，当后代元素的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的相应函数来处理事件。
-
说明：利用了事件冒泡的原理，减少事件的绑定次数，提高程序的性能
-
细节处理：如果只需要对当前的文字进行事件的触发，而不是整个块的事件触发，那么需要使用event.target对当前点击的对象进行判断。
9、事件绑定：
-
使用 对象.事件名称 = 函数 的 形式来绑定响应函数，它只能同时为一个元素的一个事件绑定一个函数。如果绑定了多个函数，后面的函数会覆盖掉前面的函数。
-
使用 addEventListener() 可以为一个元素同时绑定多个响应函数，执行顺序：先绑定先执行。
-
参数：
-
【事件的名称，不加on，类型是字符串】
-
【回调函数，事件触发的时候被调用】
-
【是否在捕获阶段触发，类型是布尔值，一般传false】
-
IE8及以下不支持
-
函数中的this指向当前调用的对象
-
使用 attachEvent() 可以为一个元素同时绑定多个响应函数，执行顺序：先绑定后执行。
-
参数：
-
【事件的名称，加on，类型是字符串】
-
【回调函数，事件触发的时候被调用】
-
IE8及以下支持
-
函数中的this指向window
10、事件的传播：
-
关于事件的传播，网景公司和微软公司有不同的观点。
-
微软公司：事件应该是由内向外传播。当事件触发的时候，应该先触发当前元素的事件，然后再向当前元素的祖先元素上传播，即事件应该在捕冒泡阶段执行。
-
网景公司：事件应该是由外向内传播。当事件触发的时候，应该先触发当前元素的最外层的祖先元素事件，然后向内传播给后代元素。
-
W3C结合了两个公司的方案，将事件传播分为了三个阶段：
-
捕获阶段：从最外层的祖先元素向 目标元素进行事件的捕获，但是默认此时不会触发事件。
-
目标阶段：事件捕获到目标元素，开始在目标元素上触发事件。
-
冒泡阶段：事件从目标元素向其祖先元素进行传递，依次触发祖先元素上的事件。
-
如果希望在捕获阶段就触发事件，则需要将addEventListener()的第三个参数设置为true
-
IE8及以下浏览器没有捕获阶段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="box">按钮点击进行时间绑定的检测</button>
<script>
window.onload = function() {
var boxDom = document.getElementById("box");
// boxDom.onclick = function() {
// alert('使用 对象.事件的方式进行函数绑定')
// }
// IE8以上使用 addEventListener 来进行函数绑定
// boxDom.addEventListener('click', function() {
// // this是boxDom
// alert(this)
// });
// IE8以下 使用 attachEvent 来进行函数绑定
// boxDom.attachEvent('onclick', function() {
// // this是window
// alert(this);
// });
// 更改this的指向
boxDom.attachEvent('onclick', function() {
// this是boxDom
alert(this);
}.call(boxDom))
};
</script>
</body>
</html>
11、事件的拖拽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
#box1 {
position: relative;
width: 100px;
height: 100px;
background-color: pink;
}
#box2 {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>这是一段文字</div>
<div id="box1"></div>
<div id="box2"></div>
<script>
// 需求：拖拽box1
window.onload = function() {
// 获取box1对象
var box1Dom = document.getElementById("box1")
// 1、监听box1 鼠标按下 事件
box1Dom.onmousedown = function(e) {
// 4、优化鼠标的位置：鼠标对于元素的相对位置不变
e = e || window.event
var ol = e.clientX - box1Dom.offsetLeft // 获取鼠标相对于元素的位置
var ot = e.clientY - box1Dom.offsetTop
// 5、Ie8及以下阻止默认事件，chrome会报错，只有ie支持
// 当box1Dom调用setCapture方法之后，会将下一次所有的鼠标的相关事件捕获到自身（即相当于操作box1Dom）,只生效一次。
box1Dom.setCapture && box1Dom.setCapture()
// 2、监听 鼠标的移动事件，并且将box1的位置进行更改
// 一定要监听全局的鼠标移动事件，如果绑定给box1，那么会出现只能向下走，不能向上走的情况
document.onmousemove = function(event) {
event = event || window.event
box1Dom.style.left = event.clientX - ol + 'px'
box1Dom.style.top = event.clientY - ot + 'px'
}
// 3、鼠标松开，将元素固定在当前位置
// 一定要监听全局的鼠标移动事件，如果绑定给box1，那么当页面中有其他模块的时候，当鼠标移动到其他模块之上然后松手，当前的box1还会移动。
document.onmouseup = function() {
// 取消鼠标移动事件
document.onmousemove = null
// 取消鼠标松开事件
document.onmouseup = null
// 取消ie的默认事件
box1Dom.releaseCapture && box1Dom.releaseCapture()
}
/**
* 5、优化拖拽：
* - 当我们拖拽一个网页的时候，浏览器会默认去搜索当前内容，此时会导致拖拽功能异常，这个是浏览器的默认行为。
* - 除Ie8及以下的浏览器取消默认行为：return false
*/
return false
}
}
</script>
</body>
</html>
12、滚轮滚动事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚轮事件</title>
<style>
#box1 {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body style="height: 800px;">
<div id="box1"></div>
<script>
// 需求：当滚轮向上滚动，box1高度减少；当滚动向下滚动，box1高度增加
window.onload = function() {
var box1Dom = document.getElementById("box1")
// 监听鼠标的滚轮事件，不兼容火狐
box1Dom.onmousewheel = function(event) {
event = event || window.event
// 判断鼠标滚轮滚动的方向（火狐不支持）：event.wheelDelta。向上是正值，向下负值
// 判断鼠标滚轮滚动的方向（火狐支持）：event.detail。向上是负值，向下正值
if (event.wheelDelta > 0 || event.detail < 0) { // 向上滚动
box1Dom.style.height = (box1Dom.clientHeight - 10) + 'px'
} else {
box1Dom.style.height = (box1Dom.clientHeight + 10) + 'px'
}
// 如果浏览器中有滚动条，那么鼠标滚轮会控制浏览器中的滚动条滚动，需要取消这种默认行为
return false
}
// 火狐浏览器中使用addEventListener()来绑定 DOMMouseScroll事件
// 使用addEventListener()来绑定的相应函数，取消默认行为需要用到event对象
// event.preventDefault()
// 2022年自测，兼容火狐，不兼容IE
// box1Dom.onwheel = function() {
// console.log('滚动了')
// }
}
</script>
</body>
</html>
13、键盘事件：
键盘事件一般绑定给 可以获取焦点的对象或者document。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
</head>
<body>
<input type="text" />
<script>
window.onload = function() {
/**
* 键盘按下的时候触发，如果一直不松手，会连续触发
* - 事件连续触发的时候，第一次和第二次之间有间隔时间，是为了防止误操作的
* */
document.onkeydown = function(event) {
event = event || window.event;
/**
* event.keyCode可以获取当前按键的编码
* 除了keyCode之外，事件对象还提供了下面的三个属性，用来判断alt、shift、ctrl是否被按下
* - altKey
* - ctrlKey
* - shiftKey
* 按下返回true，未按下返回false
* */
// 判断当前的按键是否是y+ctrl同时按下
if(event.keyCode === 89 && event.ctrlKey) {
console.log('同时按下 y+ctrl')
}
}
// 键盘松开的时候触发
document.onkeyup = function() {
}
// 获取input的Dom
var inputDom = document.getElementsByTagName("input")[0]
inputDom.onkeydown = function(event) {
event = event || window.event;
//不允许在输入框中输入数字(数字0-9的keyCode是48-57)
console.log('event',event.keyCode)
if(event.keyCode > 47 && event.keyCode < 58) {
// 键盘按下事件,在输入框中写入数据是浏览器默认行为。
// 阻止这种默认行为
return false
}
}
}
</script>
</body>
</html>