事件（上）

事件概述

事件是DOM交互主要核心内容，事件是指代触发对应的操作来执行对应的处理的过程。事件是异步的，它是交由对应的事件处理线程来进行管理的。

事件的三大的核心

发布者（元素）
监听者（订阅者）（js引擎）（监听内容事件名）
处理函数（相关事件触发的执行函数）

示例

我去商店买衣服，衣服缺货了，我跟店主说等衣服到了通知我，我去买。

监听者店主（监听的内容衣服到了）
发布者我（等衣服到了通知我）
处理我去买

事件监听的整个过程是一个发布订阅者模式（观察者模式）

事件的书写方式

内联模式（在标签中书写）

<button onclick="alert('点击了')">点击我</button>

脚本模式

//脚本模式
var btn = document.querySelector('#btn')
btn.onclick = function(){
    console.log('点击了')
}

内联模式里面的this指向window，而脚本模式中的this指向当前的元素。

事件的分类

事件的构成

元素.on+事件名 = 处理函数

鼠标事件

click 单击事件
dblclick 双击事件
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标移动
mouseover 鼠标进入
mouseout 鼠标离开
mouseenter 鼠标进入
mouseleave 鼠标离开
contextmenu 右键点击
...

注意事项

相关执行顺序按下事件 -- 弹起事件 -- 点击事件 -- 双击
mouseout 和 mouseover 会被子元素触发 (冒泡机制) mouseenter 和 mouseleave 不会被子元素触发的 (不具备冒泡机制)

键盘事件

keydown 键盘按下
keyup 键盘弹起
keypress 字符键按下

HTML事件

window的相关事件

load 加载事件（窗口加载完成之后触发）
unload 卸载事件（窗口内容被回收之后触发）
beforeunload 卸载之前（窗口回收之前触发）
beforeprint 打印调用之前
scroll 滚动栏滚动
resize 窗口大小变化
....

表单元素相关事件

input 输入事件
change value值发生变化调用
focus 获取焦点
blur 失去焦点
select 选中事件
reset 表单重置事件
submit 表单提交事件
...

所有的对象都具备的事件

error 事件
load 加载事件
....

event事件源对象

概述

event是一个关键词它是属于window一个属性，它记录了对应事件处理的相关内容。存在于对应的事件处理函数中。

处理函数的arguments

//js引擎给我们传递了一个对应的参数 这个参数是一个event对象
//通过形参接收实参的方式来接收这个参数
//event对象的接收可以通过对应的arguments来接收 也可以通过对应的第一个形参来进行接收
document.querySelector('button').onclick = function(arg){
    console.log(arguments) //存在一个参数
    console.log(arguments[0]) //获取这个参数它是一个event对象
    // arg就是对应的第一个实参 也就是对应的arguments[0]
    console.log(arg)
    console.log(arg == arguments[0])
}

我们发现处理函数的arguments中携带一个实参event，而这个event是通过js引擎传递给对应的处理函数的，那么我们就明白了对应的event是由处理函数接收的一个事件源对象。

//我们一般通过形参接收实参的方式来接收对应的传递实参 event 一般这个形参会命名为e 或者 evt 
//这个event有兼容问题 所以一般写成
// e = e || window.event //兼容写法
document.querySelectorAll('button')[1].onclick = function(e){
    //event接收的兼容写法
    e = e || window.event
    console.log(e)
}

event对象的相关内容

属性（鼠标事件相关属性）

pageX 鼠标基于页面的x位置（包含不可视距离的）
pageY 鼠标基于页面的y位置（包含不可视距离的）
clientX 鼠标基于页面的x位置（不包含不可视距离）
clientY 鼠标基于页面的y位置（不包含不可视距离）
screenX 鼠标基于屏幕的x位置（不包含不可视距离）
screenY 鼠标基于屏幕的y位置（不包含不可视距离）
offsetX 鼠标基于点击的元素的x位置
offsetY 鼠标基于点击的元素的y位置

altKey 是否按下alt键（共有）
ctrlKey 是否按下ctrl键（共有）
shiftKey 是否按下shift键（共有）
type 类型（共有）
button 按下的按钮
target 指向当前点击的目标元素（共有的）
currentTarget 指向当前添加事件的目标元素

键盘事件相关属性

keyCode 返回对应的ascii码（如果事件为keypress 那么区分大小写不然全是大写）
charCode 返回对应的ascii码（如果事件为keypress 那么返回对应的ascii码不然返回0）
key 返回按下的键的值

事件委托机制

1.将事件委托给对应的父元素
2.通过event.target来找到目标元素进行操作

// 事件委托机制 (事件代理) 事件委托是利用事件冒泡机制
//1.将事件委托给对应的父元素
document.querySelector('ul').onclick = function(e){
    e = e || window.event
    //2.利用event.target指向点击的目标元素 来找到真实需要处理元素进行操作
    if(e.target.tagName == 'LI'){
        console.log(e.target.innerHTML)
    }
}

事件(上)