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 = func