JavaScript页面交互事件(上)

事件三要素
1. 事件源: 绑定在谁身上的事件(和谁约定好)
2. 事件类型: 绑定一个什么事件
3. 事件处理函数: 当行为发生的时候, 要执行哪一个函数
// 1. 获取元素
var box = document.querySelector(‘div’)
// 2. 给 div 绑定一个点击事件
// 事件源: div
// 事件类型: click(点击行为)
// 事件处理函数: 准备一个函数, 在点击行为触发的时候执行
// on 是我们绑定事件的一种方式
// click 叫做事件类型
// 当页面打开, 点击在 box 这个元素上的时候, 会执行后面的函数
box.onclick = function () {
// 当我执行的时候, box 元素身上的 click 行为被触发了
console.log(‘我被点击了’)
}
常见的事件类型
大致分为几类
在 JS 的事件类型里面, 没有大写字母
1. 鼠标事件
都是一些和鼠标相关的事件
=> click 点击事件
=> dblclick 双击事件
=> contextmenu 右键单击事件
=> mousedown 鼠标按下
=> mouseup 鼠标抬起
=> mousemove 鼠标移动
=> mouseover 鼠标移入
=> mouseout 鼠标移出
=> mouseenter 鼠标移入
=> mouseleave 鼠标移出
2. 键盘事件
因为键盘事件, 没有办法确定我是在某一个元素上按下的键盘
所以一般来说我们的键盘事件绑定在 表单元素 或者 document 上
因为 表单元素 可以被选中, 有没有焦点
因为 document 表示页面, 你在这个页面中和不再这个页面中
=> keydown 键盘按下
=> keyup 键盘抬起
=> keypress 键盘按下
3. 浏览器事件
=> load 加载完毕
=> resize 窗口改变
=> scroll 滚动条滚动
4. 表单事件
专门给 form 标签和 input 标签 和 textarea 标签 和 select 标签 使用的
=> focus 聚焦事件
=> blur 失焦事件
=> change 改变事件
=> input 输入事件
=> submit 提交事件 (绑定给 form 标签)
=> reset 重置事件 (绑定给 form 标签)
5. 移动端触摸事件
=> touchstart 触摸开始(手放在屏幕上的时候)
=> touchmove 触摸移动(手在屏幕上移动)
=> touchend 触摸结束(手离开屏幕的时候)
6. 其他事件
=> transitionend 过渡动画结束 需要特殊的绑定方式
=> animationend 帧动画结束 需要特殊的绑定方式
=> selectstart 开始框选文本
var box = document.getElementById(‘box’)
var inp = document.getElementsByClassName(‘username’)[0]
var form = document.getElementsByTagName(‘form’)[0]
// 6. 其他事件
// document.onselectstart = function () {
// console.log(‘你要框选文本框, 请先付费’)
// return false
// }
// 3. 表单事件
// 聚焦事件
// inp.onfocus = function () { console.log(‘文本框聚焦了’) }
// 失焦事件
// inp.onblur = function () { console.log(‘文本框失焦了’) }
// 改变事件(当用户输入结束的时候, 只要和输入之前的不一样, 就会触发改变行为)
// 失去焦点的时候表示我输入完毕了
// inp.onchange = function () { console.log(‘文本框内容改变了’) }
// 输入事件(只要用户在文本框里面输入内容就触发)
// inp.oninput = function () { console.log(‘你在输入内容’) }
// 表单提交事件(当点击 submit 的时候会触发)
// 因为以点击 submit 按钮, 就会自动提交表单, 会刷新页面
// 所以, 其实打印了, 但是我们看不到
// 我先暂时加一个 return false, 为了看到内容
// return false 的能力就是不让表单自动提交
// form.onsubmit = function () {
// console.log(‘我要提交表单了’)
// return false
// }
// 表单重置事件
// 当你点击 reset 按钮的时候会触发, 绑定在 form 标签上
// form.onreset = function () { console.log(‘表单重置了’) }
// 2. 键盘事件
// 键盘按下事件
// inp.onkeydown = function () { console.log(‘键盘按下去了’) }
// 键盘抬起事件
// inp.onkeyup = function () { console.log(‘键盘抬起来了’) }
// 键盘按下事件
// inp.onkeypress = function () { console.log(‘键盘按下事件’) }
// 1. 鼠标事件
// 点击事件
// box.onclick = function () { console.log(‘点击事件触发’) }
// 双击事件(每一个双击事件都会触发两个单击行为)
// box.ondblclick = function () { console.log(‘双击事件触发’) }
// 右键单击事件
// box.oncontextmenu = function () { console.log(‘鼠标右键单击’) }
// 鼠标按下(当鼠标左键按下去的时候, 不需要抬起来就触发了)
// box.onmousedown = function () { console.log(‘鼠标按下去了’) }
// 鼠标抬起
// box.onmouseup = function () { console.log(‘鼠标抬起来了’) }
// 鼠标移动(只要鼠标在元素上移动, 就会触发)
// box.onmousemove = function () { console.log(‘鼠标在移动呢’) }
// 鼠标移入(当光标从元素外面移动到元素里面的时候)
// box.onmouseover = function () { console.log(‘鼠标移入元素’) }
// 鼠标移出(当光标从元素里面移动到元素外面的时候)
// box.onmouseout = function () { console.log(‘鼠标移出元素’) }
// 鼠标移入
// box.onmouseenter = function () { console.log(‘鼠标移入’) }
// 鼠标移出
// box.onmouseleave = function () { console.log(‘鼠标移出’) }
我和 小明约定好, 明天 12 点在十字路口见面
当第二天到达 12 点的时候, 我们就会在路口见面
我和 小明约定好, 明天 12 点在十字路口见面
如果你路上看见了卖棉花糖的, 就给我买一个
当第二天到达 12 点的时候, 我们就会在路口见面
如果卖棉花糖的出来了, 那么他会拿着棉花糖来
我和 小明约定好, 明天 12 点在十字路口见面
当第二天到达 12 点的时候, 我们就会在路口见面
卖棉花糖的在路上, 小明也不会买一个过来
事件对象
在每一个事件触发的时候都应该有一些描述性的信息
=> 触发的什么事件
=> 触发的哪一个元素身上的事件
=> 鼠标事件的时候, 光标坐标点时什么
=> 键盘事件的时候, 按下的时哪一个按键
当我们把这些信息放在一个 对象 里面的时候
我们管这个对象叫做 事件对象
事件对象: 就是一个保存了本次事件的描述信息的对象数据类型
当你触发事件的时候, 浏览器会帮我们记录好这些内容
你只要获取到事件对象, 去里面进行查看就可以了
当你绑定好一个事件的以后
当用户触发这个事件的时候
那么浏览器会帮我们把关于这个事件的所有信息都记录下来
给到我们, 让我们使用
如何在事件里面获取事件对象
标准浏览器 => 直接在事件处理函数的时候接收一个形参的形式
box.onclick = function (e) {}
e => 就是一个形参, 你可以写 event 或者 ev 或者 e
=> 会在事件触发的时候, 由 浏览器 给我们传递实参
=> 我们直接在事件处理函数里面使用 e 就可以了
=> 得到的就是事件对象(里面包含本次事件的一些描述信息)
=> 所有事件都有事件对象
IE 低版本 => 要使用 window.event 来获取
直接在事件处理函数里面使用 window.event 来获取
兼容方式
接收形参 e
在事件处理函数里面写 e = e || window.event
给形参 e 进行重新赋值
赋值的内容, 如果有实参, 就使用实参, 如果没有, 就使用 window.event
// 0. 获取元素
var box = document.getElementsByTagName(‘div’)[0]
// 1. 绑定事件
box.onclick = function (e) {
// e 会在行为触发的时候, 由浏览器传递实参
// console.log(e)
// console.log(window.event)
// 处理事件对象兼容
e = e || window.event
console.log(e)
}
事件对象里面的信息 - 鼠标事件
学习一些在事件对象内和鼠标事件相关的信息
button 属性: 决定的是你按下的是鼠标的哪一个按键
clientX 和 clientY 属性: 相对于浏览器可视窗口左上角的坐标
pageX 和 pageY 属性: 相对于页面左上角的坐标
offsetX 和 offsetY 属性: 相对于元素左上角的坐标
// 0. 获取元素
var box = document.querySelector(‘div’)
// 坐标点
box.onclick = function (e) {
// 处理事件对象兼容
e = e || window.event
// 打印看一下几组坐标
// clientX 和 clientY
console.log(‘clientX : ‘, e.clientX)
console.log(‘clientY : ‘, e.clientY)
console.log(’’)
// pageX 和 pageY
console.log('pageX : ', e.pageX)
console.log('pageY : ‘, e.pageY)
console.log(’’)
// offsetX 和 offsetY
console.log(‘offsetX : ‘, e.offsetX)
console.log(‘offsetY : ‘, e.offsetY)
console.log(’========================’)
}
// 1. 绑定事件
// box.onclick = function (e) {
// // 处理事件对象兼容
// e = e || window.event
// // 看一下 事件对象 里面的 button 属性
// console.log(e)
// }
// box.oncontextmenu = function (e) {
// e = e || window.event
// console.log(e)
// }
案例 - 实时显示坐标点
思路:
1. 要一个鼠标移动事件
=> 绑定给谁 ?
可以绑定给 body 可以绑定给 html 可以绑定给 document
问题: body 没有高, html 没有高, 都是被内容撑开的
如果你要是绑定在他们身上, 就要设置 宽高 100%
不推荐把任何事件绑定在 html 身上
对于整个页面都要触发的事件
最好是绑定在 document 身上
2. 在移动事件里面获取光标的坐标点
=> 用哪一套坐标点 ?
因为我需要的是光标在可视窗口里面的坐标位置
所以使用 clientX 和 clientY
3. 拿到的坐标点分别给两个 span 填充内容
=> 用什么方法填充 ?
innerHTML
innerText
// 0. 获取元素, 需要获取两个 span 标签, 需要向里面填充内容
var spanX = document.querySelector(’.x’)
var spanY = document.querySelector(’.y’)
// 1. 给 document 绑定鼠标移动事件
document.onmousemove = function (e) {
// 处理事件对象兼容
e = e || window.event
// 2. 获取鼠标光标点
var x = e.clientX
var y = e.clientY
// 3. 把拿到的坐标点填充到两个 span 标签里面
spanX.innerText = x
spanY.innerText = y
// appendChild 方法参数需要是一个节点
// 但是现在的 x 是一个字符串, 不是节点
// 创建一个文本节点
// var textX = document.createTextNode(x)
// 你每移动一下, 项里面追加一个节点
// 你移动的多了以后, 里面的节点就越来越多
// 所以, 我们在每次添加节点之前, 要把你面本身的节点删除掉
// spanX.removeChild(spanX.childNodes[0])
// spanX.appendChild(textX)
}
案例 - 鼠标跟随
思路:
1. 绑定一个鼠标移入事件, 在移入事件里面让图片显示
=> 绑定给谁 ?
因为移入 页面 就要显示, 所以绑定给 document
2. 绑定一个鼠标移出事件, 在移出事件里面让图片消失
=> 绑定给谁 ?
因为移出 页面 就要消失, 所以绑定给 document
3. 绑定一个鼠标移动事件
=> 绑定给谁 ?
因为在整个 页面 移动的时候, 都要跟着走
所以绑定给 document
4. 在移动事件里面进行光标的获取
=> 获取那一组光标 ?
因为我们使用的 fixed 定位
所以我们就获取相对于浏览器可视窗口的一组坐标
clientX 和 clientY
5. 获取到光标以后, 给小图片设置定位位置
x 轴坐标设置给 left 属性的值
y 轴坐标设置给 top 属性的值
// 0. 获取元素
var icon = document.querySelector(’.icon’)
// 1. 给 document 绑定一个移入事件
document.onmouseover = function () {
// 1-2. 让 icon 显示
icon.style.display = ‘block’
}
// 2. 给 document 绑定一个移出事件
document.onmouseout = function () {
// 2-2. 让 icon 消失
icon.style.display = ‘none’
}
// 3. 给 document 绑定一个移动事件
document.onmousemove = function (e) {
// 处理事件对象兼容
e = e || window.event
// 4. 获取相对于可视窗口的坐标
var x = e.clientX
var y = e.clientY
// 5. 给 icon 元素赋值 left 属性和 top 属性
icon.style.left = x + ‘px’
icon.style.top = y + ‘px’
}
案例 - 全屏拖拽
在屏幕里面可以拖着 div 跑
不能出屏幕
思路:
1. 鼠标按下去以后, 移动可以跟着走
鼠标抬起来以后, 移动不可以跟着走
鼠标按下以后, 移动事件可以触发
鼠标抬起以后, 移动事件不能触发
解决问题: 方法一
把绑定移动事件的代码, 放在 按下事件里面去绑定
问题: 第一次按下以后, 事件被绑定上了, 但是没有解绑过
第一次按下以后, 只要在移动就可以触发
需要在移出的时候解绑事件
我们的每一次拖拽的时候都要经历一次绑定一次解绑
多次操作 DOM, 对性能影响并不好
解决问题: 方法二
准备一个变量, 由这个变量来决定是不是执行 mousemove 的处理函数
我在 mousemove 的处理函数一开始判断一下
如果这个变量的值是 ‘按下’, 那么就继续执行代码
如果这个变量的值是 ‘抬起’, 那么就不继续执行代码
鼠标按下的时候, 把这个变量赋值为 ‘按下’
鼠标抬起的时候, 把这个变量赋值为 ‘抬起’
2. 在移动事件里面进行
随时获取光标的坐标点
因为是在屏幕内移动, 不允许出屏幕
使用 clientX 和 clientY
3. 把坐标点赋值给元素的 left 和 top 值
把 clientX 的值赋值给 left
把 clientY 的值赋值给 top
// 0. 获取元素
var box = document.querySelector(‘div’)
// 定义一个变量保存状态
// 鼠标的状态一共就是两种, 一个叫做按下, 一个叫做抬起
// 我们的布尔值也是只有两种, 一个叫做 true, 一个叫做 false
// true 表示按下, false 表示抬起
// var state = ‘抬起’
var state = false
// 1. 绑定事件
box.onmousedown = function () {
console.log(‘按下’)
// status = ‘按下’
state = true
}
box.onmouseup = function () {
console.log(‘抬起’)
// status = ‘抬起’
state = false
}
box.onmousemove = function (e) {
// 判断的目的是什么
// 是为了决定这个位置后面的代码还要不要执行
// 我在触发移动事件的时候, 如果鼠标是抬起的, 那么后面的代码不需要执行
// 我在触发移动事件的时候, 如果鼠标是按下的, 那么后面的代码需要执行
if (state === false) {
return
}
// 处理事件对象兼容
e = e || window.event
// 2. 获取坐标点
// 让光标点 - 盒子的一半, 为了把光标让在盒子的中心位置
// 这样上下左右跑都没有问题了
// 获取到盒子的占地面积 / 2, 现在我们是没有边框
// 占地面积使用 offsetWidth 或者 clientWidth 都可以
// offsetWidth 获取元素的占地面积 内容 + padding + border
// clientWidth 获取元素的占地面积 内容 + padding
var x = e.clientX - box.offsetWidth / 2
var y = e.clientY - box.offsetHeight / 2
// 3. 给元素赋值, 让他动起来
box.style.left = x + ‘px’
box.style.top = y + ‘px’
console.log(‘拖着跑’)
}
案例 - 全屏拖拽
在屏幕里面可以拖着 div 跑
不能出屏幕
思路:
1. 鼠标按下去以后, 移动可以跟着走
鼠标抬起来以后, 移动不可以跟着走
鼠标按下以后, 移动事件可以触发
鼠标抬起以后, 移动事件不能触发
解决问题: 方法一
把绑定移动事件的代码, 放在 按下事件里面去绑定
问题: 第一次按下以后, 事件被绑定上了, 但是没有解绑过
第一次按下以后, 只要在移动就可以触发
需要在移出的时候解绑事件
我们的每一次拖拽的时候都要经历一次绑定一次解绑
多次操作 DOM, 对性能影响并不好
解决问题: 方法二
准备一个变量, 由这个变量来决定是不是执行 mousemove 的处理函数
我在 mousemove 的处理函数一开始判断一下
如果这个变量的值是 ‘按下’, 那么就继续执行代码
如果这个变量的值是 ‘抬起’, 那么就不继续执行代码
鼠标按下的时候, 把这个变量赋值为 ‘按下’
鼠标抬起的时候, 把这个变量赋值为 ‘抬起’
2. 在移动事件里面进行
随时获取光标的坐标点
因为是在屏幕内移动, 不允许出屏幕
使用 clientX 和 clientY
3. 把坐标点赋值给元素的 left 和 top 值
把 clientX 的值赋值给 left
把 clientY 的值赋值给 top
4. 边界值判断
不能让他出界
右边:
当移动的距离 >= 可视窗口宽度 - 元素的宽度, 表示要出界了
我们此时让 移动的距离 = 可视窗口的宽度 - 元素的宽度
下边:
当移动距离 >= 可视窗口的高度 - 元素的高度, 表示要出界了
我们此时让 移动的距离 = 可视窗口的高度 - 元素的高度
左边:
当移动距离 <= 0 的时候
我们此时让 移动距离 = 0
上边:
当移动距离 <= 0 的时候
我们此时让 移动距离 = 0
// 0. 获取元素
var box = document.querySelector(‘div’)
// 定义一个变量保存状态
var state = false
// 1. 绑定事件
box.onmousedown = function () { state = true }
box.onmouseup = function () { state = false }
box.onmousemove = function (e) {
if (state === false) {
return
}
// 处理事件对象兼容
e = e || window.event
// 2. 获取坐标点
var x = e.clientX - box.offsetWidth / 2
var y = e.clientY - box.offsetHeight / 2
// 4. 边界值判断
// x 和 y 就是移动的距离
if (x >= document.documentElement.clientWidth - box.offsetWidth) {
x = document.documentElement.clientWidth - box.offsetWidth
}
if (y >= document.documentElement.clientHeight - box.offsetHeight) {
y = document.documentElement.clientHeight - box.offsetHeight
}
if (x <= 0) {
x = 0
}
if (y <= 0) {
y = 0
}
// 3. 给元素赋值, 让他动起来
box.style.left = x + ‘px’
box.style.top = y + ‘px’
}
事件对象里面的信息 - 键盘事件
键盘事件里面的主要信息就是
1. 你按下的是哪一个按键
我们键盘上每一个按键都有一个自己的编码
我们就是通过事件对象里面的编码来确定你按下的是哪一个按键
获取编码的信息由两个
e.keyCode 标准浏览器
e.which 火狐 < 20 的版本
兼容处理
var code = e.keyCode || e.which
2. 你按下的是不是组合按键
在事件对象里面有四个属性
shiftKey 判断 shift 按键
ctrlKey 判断 ctrl 按键
altKey 判断 alt 按键
metaKey (不兼容, IE 没有) 判断 win 按键
他们四个的值都是布尔值
默认是 false, 表示没有按下
当你按下去的时候, 他们会变成 true, 表示按下了
我们在判断组合按键的时候
只要多判断一个属性是不是 true 就能知道你按下的是不是组合按键
// 0. 获取元素
var inp = document.querySelector(‘input’)
// 2. 判断组合按键
inp.onkeydown = function (e) {
// 处理事件对象兼容
e = e || widnow.event
// 处理键盘编码兼容
var code = e.keyCode || e.which
// 判断按下的是组合按键
if (code === 65 && e.shiftKey === true && e.ctrlKey === true && e.altKey === true) {
alert(‘您按下的是 shift + ctrl + alt + a’)
console.log(e)
}
}
// 1. 绑定一个键盘事件 - 看键盘编码
// inp.onkeydown = function (e) {
// // 处理事件对象兼容
// e = e || window.event
// // 键盘编码的兼容处理
// var code = e.keyCode || e.which
// // 判断你按下的是 回车 按钮
// if (code === 13) {
// alert(‘您按下的是 回车 按键’)
// }
// }
事件监听器
就是我们绑定事件的第二种方式
我们绑定事件一共有两种方式
dom0级 事件: 使用 on 的方式进行绑定
dom2级 事件: 使用 监听器 的方式进行绑定
监听器: 我们有两种监听器
标准浏览器使用的 监听器
IE 低版本使用的 监听器
1. 标准浏览器的事件监听器
语法: 元素.addEventListener(‘事件类型’, 事件处理函数)
作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行
2. IE 低版本的事件监听器
语法: 元素.attachEvent(‘on事件类型’, 事件处理函数)
作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行
// 0. 获取元素
var box = document.getElementsByTagName(‘div’)[0]
// 1. 标准浏览器使用监听器的方式绑定事件
// box.addEventListener(‘click’, function () {
// console.log(‘我被点击了’)
// })
// 2. IE 低版本使用事件监听器的方式绑定事件
// box.attachEvent(‘onclick’, function () {
// console.log(‘我被点击了’)
// })
dom0级 和 dom2级 的区别
dom0级 事件, 只能给一种事件绑定一个事件处理函数
因为是 = 赋值, 当你给他第二个值的时候, 第一个就被覆盖了
dom2级 事件, 可以给一种事件绑定多个事件处理函数
当事件触发的时候都会执行
dom2级 事件中, addEventLister 和 attachEvent 的区别
addEventListener
1. 使用在标准浏览器
2. 事件类型位置不需要 on
3. 至少两个参数, 一个是事件类型, 一个是事件处理函数
4. 当你给一个事件注册多个事件处理函数的时候
顺序注册, 顺序执行
attachEvent
1. 使用在 IE 低版本浏览器
2. 事件类型位置需要 on
3. 只有两个参数, 一个是事件类型, 一个是事件处理函数
4. 当你给一个事件注册多个事件处理函数的时候
顺序注册, 倒叙执行
// 0. 获取元素
var div = document.getElementsByTagName(‘div’)[0]
// 1. 使用 dom0 级事件绑定事件
// div.onclick = function () { console.log(‘我被点击了 一号’) }
// 当这个事件处理函数被赋值给 onclick 的时候, 那么前面的就没有了
// div.onclick = function () { console.log(‘我被点击了 二号’) }
// 2. 使用 dom2 级事件绑定事件
// div.addEventListener(‘click’, function (e) { console.log(e) })
// div.addEventListener(‘click’, function () { console.log(‘点击了 二号’) })
// div.addEventListener(‘click’, function () { console.log(‘点击了 一号’) })
// 3. 使用 dom2 级事件绑定事件
// div.attachEvent(‘onclick’, function () { console.log(window.event) })
// div.attachEvent(‘onclick’, function () { console.log(‘IE 二号’) })
// div.attachEvent(‘onclick’, function () { console.log(‘IE 三号’) })