JavaScript全解析—DOM事件（上）
DOM事件
它是指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作），一个事件由哪几部分组成
- 触发谁的事件：事件源
- 触发什么事件：事件类型
- 触发以后做什么：事件处理函数（事件处理程序）
var oDiv = document.querySelector('div')
oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数
我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document.querySelector('div')
oDiv.onclick = function () {
console.log('你点击了 div')
}
当我们点击 div 的时候，就会执行事件处理函数内部的代码，每点击一次，就会执行一次事件处理函数。
事件绑定和事件解绑
事件绑定
事件绑定有DOM 0级和DOM 2级，没有DOM 1级，DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型。
DOM 0级事件绑定
我们现在给一个注册事件都是使用 onxxx 的方式，但是这个方式不是很好，只能给一个事件源的同一个事件类型, 只能绑定一个事件处理函数，一旦写了第二个事件，那么第一个就被覆盖了
语法：事件源.onclick = 事件处理程序（事件处理函数）
oDiv.onclick = function () {
console.log('我是第一个事件')
}
oDiv.onclick = function () {
console.log('我是第二个事件')
}
当你点击的时候，只会执行第二个，第一个就没有了
DOM 2级事件绑定 事件监听
标准浏览器
使用 addEventListener 的方式添加。addEventListener : 非 IE 7 8 下使用
语法：元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)
可以给同一个事件源的同一个事件类型绑定多个事件处理函数
oDiv.addEventListener('click', function () {
console.log('我是第一个事件')
}, false)
oDiv.addEventListener('click', function () {
console.log('我是第二个事件')
}, false)
当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行，先打印 我是第一个事件 再打印 我是第二个事件
注意：事件类型的时候不要写 on，点击事件就是 click，不是 onclick
IE低版本浏览器
attachEvent ：IE 7 8 下使用
语法：元素.attachEvent('事件类型'， 事件处理函数)
可以给同一个事件源的同一个事件类型绑定多个事件处理函数
oDiv.attachEvent('onclick', function () {
console.log('我是第一个事件')
})
oDiv.attachEvent('onclick', function () {
console.log('我是第二个事件')
})
当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行，先打印 我是第二个事件 再打印 我是第一个事件
注意：事件类型的时候要写 on，点击事件就行 onclick
两个方式的区别
- 注册事件的时候事件类型参数的书写
○addEventListener ：不用写 on
○attachEvent ：要写 on - 参数个数
○addEventListener ：一般是三个常用参数
○attachEvent ：两个参数 - 执行顺序
○addEventListener ：顺序注册，顺序执行
○attachEvent ：顺序注册，倒叙执行 - 适用浏览器
○addEventListener ：非 IE 7 8 的浏览器
○attachEvent ：IE 7 8 浏览器
事件解绑
DOM 0级事件解绑
语法：事件源.on事件类型 = null
因为赋值符号, 当你给这个事件类型赋值为 null 的时候，会把本身的事件处理函数覆盖，当你再次触发行为的时候, 没有事件处理函数执行，相当于解绑了事
<!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: pink;
}
</style>
</head>
<body>
<button>事件解绑</button>
<div></div>
<script>
// 0. 获取元素
var div = document.getElementsByTagName('div')[0]
var btn = document.getElementsByTagName('button')[0]
// 1. DOM 0级 绑定事件
div.onclick = function() {
console.log('你好 世界')
}
btn.onclick = function() {
console.log('在这里操作解绑 div 的事件')
// 1. DOM 0级 事件解绑
div.onclick = null
console.log('解绑事件的代码执行完毕了')
}
</script>
</body>
</html>
DOM 2级事件解绑
标准浏览器
语法：事件源.removeEventListener('事件类型', 事件处理函数)
注意：当你使用 DOM 2级 事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候，需要把函数单独书写出来, 以函数名的形式进行绑定和解绑
<!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: pink;
}
</style>
</head>
<body>
<button>事件解绑</button>
<div></div>
<script>
// 0. 获取元素
var div = document.getElementsByTagName('div')[0]
var btn = document.getElementsByTagName('button')[0]
// DOM 2级 事件 标准浏览器
function a() {
console.log('我是事件处理函数')
}
div.addEventListener('click', a)
btn.onclick = function() {
console.log('在这里操作解绑 div 的事件')
// 2. DOM 2级 事件解绑 - 标准浏览器
//事件源.removeEventListener('事件类型', 事件处理函数)
div.removeEventListener('click', a)
console.log('解绑事件的代码执行完毕了')
}
</script>
</body>
</html>
IE低版本浏览器
语法：事件源.detachEvent('on事件类型', 事件处理函数)
注意：当你使用 DOM 2级 事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候，需要把函数单独书写出来, 以函数名的形式进行绑定和解绑。
<!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: pink;
}
</style>
</head>
<body>
<button>事件解绑</button>
<div></div>
<script>
// 0. 获取元素
var div = document.getElementsByTagName('div')[0]
var btn = document.getElementsByTagName('button')[0]
// DOM 2级 事件 IE 低版本
function b() {
console.log('IE 的事件处理函数')
}
div.attachEvent('onclick', b)
btn.onclick = function() {
console.log('在这里操作解绑 div 的事件')
//DOM 2级 事件解绑 - IE 低版本
div.detachEvent('onclick', b)
console.log('解绑事件的代码执行完毕了')
}
</script>
</body>
</html>
-------------------------------------------------------分割线-----------------------------------
DOM事件（中）
常见的事件分类（了解）
我们在写页面的时候经常用到的一些事件,大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件,不需要都记住，但是大概要知道.
鼠标事件
- click ：点击事件
- dblclick ：双击事件
- contextmenu ： 右键单击事件
- mousedown ：鼠标左键按下事件
- mouseup ：鼠标左键抬起事件
- mousemove ：鼠标移动
- mouseover ：鼠标移入事件
- mouseout ：鼠标移出事件
- mouseenter ：鼠标移入事件
- mouseleave ：鼠标移出事件
<!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: 300px;
height: 300px;
background-color: pink;
}
p {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
/*
鼠标事件
+ 就是依赖行为触发的事件
+ over 和 out 是一套
=> 在移入和移出后代元素的时候也会触发
+ enter 和 leave 是一套
=> 在移入和移出后代元素的时候不会触发
1. click: 鼠标左键单击
2. dblclick: 鼠标左键双击
3. contextmenu: 鼠标右键单击
4. mousedown: 鼠标按键按下
5. mouseup: 鼠标抬起事件
6. mousemove: 鼠标移动事件
7. mouseover: 鼠标移入事件
8. mouseout: 鼠标移出事件
9. mouseenter: 鼠标移入事件
10. mouseleave: 鼠标移出事件
11. ...
*/
// 0. 获取元素
var box = document.querySelector('div')
// 1.
// 有鼠标左键单击行为发生在 box 身上的时候触发
box.onclick = function () { console.log('鼠标左键单击') }
// 2.
// 有鼠标左键双击行为发生在 box 身上的时候触发
// 你想触发一个双击行为, 必须要由两个单击行为组成
box.ondblclick = function () { console.log('鼠标左键双击') }
// 3.
box.oncontextmenu = function () { console.log('鼠标右键单击') }
// 4.
box.onmousedown = function () { console.log('按键按下了') }
// 5.
box.onmouseup = function () { console.log('按键抬起了') }
// 6.
box.onmousemove = function () { console.log('鼠标移动了') }
// 7.
box.onmouseover = function () { console.log('鼠标移入') }
// 8.
box.onmouseout = function () { console.log('鼠标移出') }
// 9.
box.onmouseenter = function () { console.log('鼠标又移入了') }
// 10.
box.onmouseleave = function () { console.log('鼠标又移出了') }
</script>
</body>
</html>
键盘事件
- keyup ： 键盘抬起事件
- keydown ： 键盘按下事件
- keypress ： 键盘按下再抬起事件
<!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: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<script>
/*
键盘事件
+ 所有元素都可以绑定键盘事件, 但是不是所有元素都能触发
+ 一般绑定在 window 或者 document 或者 可选中元素 身上
1. keydown: 键盘按下事件
=> 键盘上任何一个按键按下都会触发
2. keyup: 键盘抬起事件
3. keypress: 键盘键入事件
=> 按键按下的时候触发
=> 但是只有可以键入内容的按键和 回车键 会触发
*/
// 0. 获取元素
var inp = document.querySelector('input')
// 1.
inp.onkeydown = function () { console.log('键盘按下了') }
// 2.
inp.onkeyup = function () { console.log('按键抬起了') }
// 3.
inp.onkeypress = function () { console.log('键盘键入内容了') }
</script>
</body>
</html>
表单事件
- focus：聚焦（获取焦点）以后触发
- blur：失去焦点以后触发
- change : 表单内容改变事件，需要内容改变才触发
- input : 表单内容输入/删除时触发该事件
- reset：表单重置事件。事件需要绑定给 form 标签。由 form 标签内的 reset 按钮触发
- submit : 表单提交事件。事件需要绑定给 form 标签。由 form 标签内的 submit 按钮触发
<!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>
</head>
<body>
<form action="">
<input type="text">
<input type="reset">
<input type="submit">
</form>
<script>
/*
表单事件
+ 依赖表单元素的行为触发的事件
1. focus: 聚焦事件
2. blur: 失焦事件
3. change: 改变事件
=> 保证你聚焦和失焦的时候, 内容不一致才会触发
=> 时机: 失焦以后
4. input: 输入事件
=> 随着输入和删除内容实时触发
5. reset: 表单重置事件
=> 事件需要绑定给 form 标签
=> 通过点击 重置 按钮触发
6. submit: 表单提交事件
=> 事件需要绑定给 form 标签
=> 通过点击 提交 按钮触发
*/
// 0. 获取元素
var inp = document.querySelector('input')
var form = document.querySelector('form')
// 1.
inp.onfocus = function () { console.log('聚焦了') }
// 2.
inp.onblur = function () { console.log('失焦了') }
// 3.
inp.onchange = function () { console.log('改变了') }
// 4.
inp.oninput = function () { console.log('输入内容了') }
// 5.
form.onreset = function () { console.log('表单重置了') }
// 6.
form.onsubmit = function () { console.log('表单提交了') }
</script>
</body>
</html>
触摸事件
- touchstart ： 触摸开始事件
- touchend ： 触摸结束事件
- touchmove ： 触摸移动事件
<!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: pink;
}
</style>
</head>
<body>
<div></div>
<script>
/*
触摸事件
+ 依赖屏幕触摸行为触发的事件
1. touchstart: 触摸开始, 手指接触到屏幕瞬间
2. touchmove: 触摸移动, 手指在屏幕上移动
3. touchend: 触摸结束, 手指离开屏幕的瞬间
*/
var box = document.querySelector('div')
// 1.
box.ontouchstart = function () { console.log('触摸开始') }
// 2.
box.ontouchmove = function () { console.log('触摸移动') }
// 3.
box.ontouchend = function () { console.log('触摸结束') }
</script>
</body>
</html>
拖拽事件
在浏览器内元素发生了拖拽行为以后触发的事件
拖拽元素的事件
- dragstart 开始拖拽 即将进入拖拽移动状态的瞬间触发
- drag 拖拽移动 拖拽元素在移动的时候实时触发
- dragend 拖拽结束 拖拽元素放手的时候触发
拖放元素事件
- dragenter 拖拽元素进入拖放元素范围的时候触发(注意: 光标进入)
- dragleave 拖拽元素离开拖放元素范围的时候触发(注意: 光标离开)
- dragover 拖拽元素完全进入拖放元素范围内触发
pEle.ondragover = function () {
// 一段取消影响的代码
return false
}
- drop 拖拽元素在拖放元素内放手的时候触发
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
left: 0;
top: 0;
transition: all 1s linear;
}
p {
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
left: 500px;
top: 500px;
transition: all 1s linear;
}
</style>
</head>
<body>
<div draggable="true"></div>
<p></p>
<script>
// 获取元素
var divEle = document.querySelector('div')
var pEle = document.querySelector('p')
// 拖拽元素的事件
// 1. dragstart 开始拖拽
// 即将进入拖拽移动状态的瞬间触发
divEle.ondragstart = function () { console.log('你要把我拖走了') }
// 2. drag 拖拽移动
// 拖拽元素在移动的时候实时触发
divEle.ondrag = function () { console.log('你拖着我正在走') }
// 3. dragend 拖拽结束
// 拖拽元素放手的时候触发
divEle.ondragend = function () { console.log('你放手了') }
// 拖放元素事件
// 4. dragenter 拖拽元素进入拖放元素范围的时候触发(注意: 光标进入)
pEle.ondragenter = function () { console.log('啊, 你把它拖进来了 !! ^_^') }
// 5. dragleave 拖拽元素离开拖放元素范围的时候触发(注意: 光标离开)
pEle.ondragleave = function () { console.log('你又把他带走了') }
// 6. dragover 拖拽元素完全进入拖放元素范围内触发
pEle.ondragover = function () {
// 一段取消影响的代码
return false
}
// 7. drop 拖拽元素在拖放元素内放手的时候触发
// 注意: 需要在 dragover 事件内进行阻止默认行为
// drop 事件会被 dragover 事件影响, 你想触发 drop 事件, 就需要消除 dragover 事件的影响
// 需要给元素绑定一个 dragover 事件, 并且在该事件内取消影响
pEle.ondrop = function () { console.log('你在我身上放手了') }
</script>
</body>
</html>
事件对象
什么是事件对象？就是一个对象数据类型, 记录了本次事件的所有信息，也就是当你触发了一个事件以后，对该事件的一些详细的描述信息。就存储在事件对象中，例如：
- 你触发一个点击事件的时候，是点击的哪个标签
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
- ...
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象，浏览器给了我们一个 黑盒子，叫做 window.event，就是对事件信息的所有描述，比如点击事件，你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性，你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性...
oDiv.onclick = function () {
console.log(window.event.X轴坐标点信息)
console.log(window.event.Y轴坐标点信息)
}
这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题，在 IE低版本 里面这个东西好用，但是在 高版本IE 和 Chrome 里面不好使了，我们就得用另一种方式来获取 事件对象，在每一个事件处理函数的行参位置，默认第一个就是 事件对象
oDiv.onclick = function (e) {
// e 就是和 IE 的 window.event 一样的东西
console.log(e.X轴坐标点信息)
console.log(e.Y轴坐标点信息)
}
综上所述，我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法
oDiv.onclick = function (e) {
e = e || window.event
console.log(e.X轴坐标点信息)
console.log(e.Y轴坐标点信息)
}
事件对象内的信息--鼠标事件
刚才即然说了，可以获取到坐标点，那么接下来我们就学习一下怎么获取坐标点，我们的每一个点击事件的坐标点都不是一对，因为要有一个相对的坐标系
例如：
- 相对事件源（你点击的元素）
- 相对页面
- 相对浏览器窗口
- ...
因为都不一样，所以我们获取的 事件对象 里面的属性也不一样，相对于点击的元素来说offsetX 和 offsetY，是相对于你点击的元素的边框内侧开始计算。
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #333;
margin: 20px 0 0 30px;
}
</style>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 注册点击事件
oDiv.onclick = function (e) {
// 事件对象兼容写法
e = e || window.event
console.log(e.offsetX)
console.log(e.offsetY)
}
</script>
</body>
相对于浏览器窗口点击的坐标点
clientX 和 clientY，是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #333;
margin: 20px 0 0 30px;
}
</style>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 注册点击事件
oDiv.onclick = function (e) {
// 事件对象兼容写法
e = e || window.event
console.log(e.clientX)
console.log(e.clientY)
}
</script>
</body>
相对于页面点击的坐标点
pageX 和 pageY，是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #333;
margin: 20px 0 0 30px;
}
</style>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 注册点击事件
oDiv.onclick = function (e) {
// 事件对象兼容写法
e = e || window.event
console.log(e.pageX)
console.log(e.pageY)
}
</script>
</body>
事件对象内的信息--键盘事件
刚才了解了一下鼠标事件，现在来聊聊键盘事件，我们在键盘事件里面最主要的就是要做两个事情，判断点击的是哪个按键，有没有组合按键，shift + a / ctrl + b / ...
我们先要明确一个问题，就是是不是所有元素都可以绑定键盘事件，我们说事件有一个关键的东西是，该事件是由谁来触发的，一个 div 元素在页面上，我怎么能让一个键盘事件触发在 div 上，所以说，我们一般只给能在页面上选中的元素（表单元素） 和 document 来绑定键盘事件
document.onkeyup = function () { // code.. }
oInput.onkeyup = function () { // code.. }
确定按键
我们的键盘上每一个按键都有一个自己独立的编码，我们就是靠这个编码来确定我们按下的是哪个按键的，我们通过 事件对象.keyCode 或者 事件对象.which 来获取，为什么要有两个呢，是因为 FireFox2.0 不支持 keycode 所以要用 which
document.keyup = function (e) {
// 事件对象的兼容写法
e = e || window.event
// 获取键盘码的兼容写法
var keyCode = e.keyCode || e.which
console.log(keyCode)
}
常见的键盘码（了解）
- 8： 删除键（delete）
- 9： 制表符（tab）
- 13： 回车键（ebter）
- 16： 上档键（shift）
- 17： ctrl 键
- 18： alt 键
- 27： 取消键（esc）
- 32： 空格键（space）
- ...
组合按键
组合案件最主要的就是 alt / shift / ctrl 三个按键，在我点击某一个按键的时候判断一下这三个键有没有按下，有就是组合了，没有就是没有组合，事件对象里面也为我们提供了三个属性
- altKey ：alt 键按下得到 true，否则得到 false
- shiftKey ：shift 键按下得到 true，否则得到 false
- ctrlKey ：ctrl 键按下得到 true，否则得到 false
- metakey：win键按下是true，否则是false
我们就可以通过这三个属性来判断是否按下了
document.onkeyup = function (e) {
e = e || window.event
keyCode = e.keyCode || e.which
if (e.altKey && keyCode === 65) {
console.log('你同时按下了 alt 和 a')
}
}
案例——实时显示坐标点位置
<!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>
</head>
<body>
<h1>
X 轴的坐标位置是 : <span class="x">0</span> <br>
Y 轴的坐标位置是 : <span class="y">0</span>
</h1>
<script>
// 0. 获取元素
var xBox = document.querySelector('.x')
var yBox = document.querySelector('.y')
// 1. 给 document 绑定 鼠标移动 事件
document.onmousemove = function(e) {
// 处理事件对象兼容
e = e || window.event
// 2. 拿到 x 和 y 的坐标点
var x = e.pageX
var y = e.pageY
// 3. 给对应的元素内的文本进行赋值
xBox.innerText = x
yBox.innerText = y
}
</script>
</body>
</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>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
ul {
margin: 100px;
}
li {
width: 500px;
height: 60px;
position: relative;
border: 1px solid #333;
margin-bottom: 20px;
font-size: 30px;
background-color: #fff;
}
li>p {
width: 300px;
height: 200px;
background-color: pink;
position: absolute;
left: 800px;
display: none;
z-index: 999;
}
</style>
</head>
<body>
<ul>
<li>我是标题1
<p>我是标题1的说明文件1</p>
</li>
<li>我是标题2
<p style="background-color: skyblue;">我是标题2的说明文件2</p>
</li>
<li>我是标题3
<p style="background-color: orange;">我是标题3的说明文件3</p>
</li>
</ul>
<script>
// 1. 获取所有 li 绑定事件
var lis = document.querySelectorAll('ul > li')
// 2. 循环遍历 lis
lis.forEach(function(item) {
// item 就是每一个 li 标签
item.onmouseover = overHandler
item.onmouseout = outHandler
item.onmousemove = moveHanlder
})
// 把事件处理函数单独定义在外面
// 3.鼠标移入的事件处理函数
function overHandler() {
this.firstElementChild.style.display = 'block'
}
// 4.鼠标移出的事件处理函数
function outHandler() {
this.firstElementChild.style.display = 'none'
}
// 5.鼠标移动的事件处理函数
function moveHanlder(e) {
// 6.处理事件对象兼容
e = e || window.event
var x = e.offsetX + 5
var y = e.offsetY + 5
// 7. 给对应的 p 标签进行赋值
this.firstElementChild.style.left = x + 'px'
this.firstElementChild.style.top = y + 'px'
}
</script>
</body>
</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>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素
var div = document.querySelector('div')
// 提前准备一个变量当做开关
var flag = false
// 鼠标按下
div.onmousedown = function() {
// console.log('盒子可以一起走')
// 打开开关
flag = true
}
// 鼠标抬起
div.onmouseup = function() {
// console.log('盒子自己呆着')
flag = false
}
// 鼠标移动
document.onmousemove = function(e) {
// 开关判断
if (flag === false) return
// 处理事件对象兼容
e = e || window.event
var x = e.clientX - 100
var y = e.clientY - 100
// 赋值给 div
div.style.left = x + 'px'
div.style.top = y + 'px'
}
</script>
</body>
</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>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素
var div = document.querySelector('div')
// 提前准备一个变量当做开关
var flag = false
// 鼠标按下
div.onmousedown = function() {
// 打开开关
flag = true
}
// 鼠标抬起
div.onmouseup = function() {
flag = false
}
// 鼠标移动
document.onmousemove = function(e) {
// 开关判断
if (flag === false) return
// 处理事件对象兼容
e = e || window.event
var x = e.clientX - 100
var y = e.clientY - 100
// 边界值判断
// 左边
if (x <= 50) x = 0
// 上边
if (y <= 50) y = 0
// 右边
if (x >= document.documentElement.clientWidth - div.offsetWidth - 50) {
x = document.documentElement.clientWidth - div.offsetWidth
}
// 下边
if (y >= document.documentElement.clientHeight - div.offsetHeight - 50) {
y = document.documentElement.clientHeight - div.offsetHeight
}
// 赋值给 div
div.style.left = x + 'px'
div.style.top = y + 'px'
}
</script>
</body>
</html>
