Appearance
html
<!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>
<!--
事件: 浏览器赋予元素的默认行为, 可以理解为事件是天生具备的, 无论我们是否为其绑定方法,
当某些行为触发时, 相关事件都会被触发执行
鼠标事件:
click 点击事件(PC端称为点击事件, 频繁点击N次, 触发N次点击事件) 单击事件(移动端
称为单击事件, 300ms内没有发送第二次点击操作. 算作点击事件行为, 所以click在移动端有300ms延迟)
dblclick 双击事件
contextmenu 鼠标右键点击触发
mousedown 鼠标按下
mouseup 鼠标抬起
mouseover 鼠标滑入
mouseout 鼠标滑出
mouseenter 鼠标进入
mouseleave 鼠标离开
mousewheel 鼠标滚轮滚动
...
键盘事件:
keydown 键盘按下
keyup 键盘抬起
keypress 被长按时触发(除shift/fn/capsLock)
...
手指事件
Touch Event 单手指事件模型
touchstart 手指按下
touchmove 手指移动
touchend 手指抬起
Gesture Event 多手指模型
...
表单事件
focus 获取焦点
blur 失去焦点
submit 表单提交(前提: 表单元素都包含在form中, 并且点击的按钮是submit)
reset 表单重置(前提: 表单元素都包含在form中, 并且点击的按钮是submit)
select 下拉框内容选择
change 内容改变
input 移动端中经常使用, 监控文本框的内容随着输入的改变而触发
...
资源事件
error 资源加载失败
abort 资源加载被中止
load 资源加载完成(window.onload, img.onload)
beforeunload window, document及其资源即将被卸载(window.beforeunload 页面关闭前触发)
unload 文档或一个依赖资源正在被卸载
CSS3动画事件
transitionend transition动画结束
transitionstart transition动画开始
transitionrun transition动画进行中
...
视图事件
resize 元素/浏览器窗口大小改变
scroll 滚动条滚动
...
...
事件绑定: 给元素默认的事件行为绑定方法, 这样可以在行为触发的时候执行这个方法
DOM0级事件绑定
语法: 元素.on[事件] = [函数] => document.body.onclick = function () {}
移除绑定: 赋值为null或者非函数的其他值 => document.body.onclick = null
原理: 每一个DOM元素对象的私有属性上都有很多类似于'onxxx'的私有属性, 初始值为null, 给这些代表事件的私有属性赋值, 就是DOM0事件绑定
如果没有对应事件的私有属性值, 如DOMContentLoaded, 则无法基于这种方式实现事件绑定
只能给当前元素的某个事件行为绑定一个方法, 绑定多个方法, 最后一个操作会覆盖之前的
好处是执行效率快, 开发使用方便
DOM2级事件绑定
语法 元素.addEventListener([事件], [函数], [捕获/冒泡阶段触发]) => => document.body.addEventListener('click', fn1, false)
移除绑定: 元素.removeEventListener('click', fn1, false)
原理: 每一个DOM元素都会基于原型链查找机制, 查找到EventTarget.prototype上的
addEventListener/removeEventListener等方法, 实现事件的移除和绑定
DOM2事件绑定采用事件池机制, 凡是浏览器提供的事件行为, 都可以基于这种模式完成事件的绑定和移除,
DOM2事件绑定, 绑定的方法一般不是匿名函数, 主要目的是方便移除事件绑定的时候使用
DOM2事件绑定, 可以给当前元素的某个事件类型绑定多个不同的方法(进入到事件池),
事件行为触发时, 会从事件池中依次按照绑定的顺序取出对应的方法然后执行
document.body.onclick = function () {}
大部分人: 给body绑定一个点击事件
标准说法: 给body点击事件行为绑定方法
不绑定方法点击body时也会触发body的点击事件, 只不过没有绑定方法, 所以什么都不做
事件对象:
给当前元素的某个事件行为绑定方法, 当事件行为触发, 不仅会把绑定的方法执行, 而且还会给方法默认传递一个实参, 这个实参就是事件对象
事件对象存储着当前事件操作及触发的相关信息(和在哪个函数中无关)
鼠标事件对象 MouseEvent
clientX/clientY 鼠标触发点距离当前窗口的x/y轴坐标
pageX/pageY 鼠标触发点距离body的x/y轴坐标
type 事件类型
target/srcElement 当前事件源(当前操作的元素)
path 传播路径
ev.preventDefault() / ev.returnValue = false 阻止默认行为
ev.stopPropagation() / ev.cancelBubble = true 阻止捕获和冒泡阶段中当前事件的进一步传播
...
键盘事件对象 KeyboardEvent
key/code 按键名
which/keyCode 按键在键值表的值
altKey 是否按下alt键
ctrlKey 是否按下ctrl键
shiftKey 是否按下shift键
手指事件对象 TouchEvent
changedTouches / touches 都是用来记录手指信息的, 常用的是changedTouches(手指按下/移动/离开屏幕, changedTouches都存储了对应的手指信息, 哪怕离开屏幕, 存储的也是最后依次手指在屏幕中的信息, 而touches在手指离开屏幕后, 就没有任何信息了)
获取的结果都是一个TouchList类数组集合, 记录每一根手指的信息
ev.changedTouches(0) 第一根手指的信息
clientX/clientY
pageX/pageY
...
普通事件对象 Event
默认行为: 浏览器会赋予元素很多默认的行为操作
鼠标右键会弹出菜单
ev.preventDefault()阻止
点击a标签会页面跳转和锚点定位
页面跳转
点击A标签, 先触发点击事件行为, 然后才是默认的跳转
<a href="www.baidu.com" id="link">百度</a>
<script>
link.onclick = function (ev) {
阻止跳转方法1
ev.preventDefault()
阻止跳转方法2
return false
}
阻止跳转方法3
<a href="javascript:;"></a
锚点定位(定位到当前页面指定ID的盒子位置, url地址中会加入hash值)
<div id="box"></div>
<a href="#box" id="link">百度</a> => 不跳转页面, 但是会定位到盒子位置, index.html#box
部分浏览器根据输入记录, 下一次输入时有模糊匹配
键盘按下会输入内容
...
事件传播机制
-->
</body>
</html>