概述：
事件是一个异步机制。他相当于一个 执行者执行 -- 观察者观察 --- 处理函数执行 这个流程称为事件。
事件的声明书写方式
1.内联模式(在标签内部
<!-- 内联模式就是在onclick书写中设置对应的代码 -->
<button onclick="alert('你好')">点我</button>
<button onclick="fn(1)">点我</button>
<script>
function fn(arg){
alert('我是函数执行'+arg);
}
</script>
2.脚本模式(在script中)
//脚本模式的写法 事件名 执行对象 处理函数
var btn = document.getElementsByTagName('button')[2]
//执行对象.on+事件名 = 处理函数
btn.onclick = function(){
console.log('你好');
}
function handler(){
console.log('处理函数执行了');
}
btn.onclick = handler
内联模式和脚本模式的区别
- 内联模式需要手动调用 脚本模式的处理函数会自动调用
- 内联模式的函数调用this指向window 脚本模式函数调用指向当前调用者
事件名的分类
鼠标事件（鼠标触发的 mouse）
- click 点击事件
- dblclick 双击事件
- mousedown按下
- mouseup 弹起
- mouseenter 移入
- mouseleave 移出
- mouseover移入
- mouseout移出
- mousemove移动
- contextmenu右键点击
注意事项
-
click和对应mousedown和mouseup的执行顺序 （mousedown -- mouseup -- click）
-
mouseenter(mouseleave)和mouseover(mouseout)的区别 （mouseenter 子元素不会触发 mouseover子元素会触发）
键盘事件 （键盘触发的 key）
keydown 键盘按下
keyup弹起
keypress 字符串按下(功能键除外)
注意事项
-
执行顺序 keydown - keypress - keyup
-
keypress 一定会触发 keydown
HTML事件 （HTML中自带的一些事件（只能用于专门HTML））
window的事件
- 加载事件 load
- 卸载 事件unload
- 关闭窗口事件 onclose
- 打印之前调用的事件(onbeforeprint)
- 卸载之前调用的事件(onbeforeunload)
- 滚动栏变化的事件(onscroll)
表单的事件
-
submit 表单提交事件
-
reset 表单重置事件
-
select 内容被选中（只针对于输入框和文本域）
-
change 表单的value值发生变化
-
input 可输入的表单标签里面进行输入
-
blur 失去焦点
-
focus 获取焦点
event 事件源对象
概述
event 被称为事件源对象，他是一个全局的内置对象（属于window），他里面包含了一些关于事件执行的相关的属性。
处理函数中Arguments
处理函数也是一个函数，函数就具备一个arguments的属性。argments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments
event的常用属性
鼠标坐标的相关属性
-
screenX 表示鼠标离屏幕的X距离
-
screenY 表示鼠标离屏幕的Y距离
-
pageX 表示当前的鼠标离页面的X距离（包含卷起部分）
-
pageY 表示当前的鼠标离页面的Y距离（包含卷起部分）
-
clientX 表示鼠标离页面可视区的X距离
-
clientY 表示鼠标离页面可视区的Y距离
-
offsetX 表示鼠标离父元素偏移的X距离
-
offsetY 表示鼠标离父元素偏移的Y距离
按钮辅助的相关属性
-
ctrlKey 是否按下了ctrl键
-
altKey 是否按下了alt键
-
shiftKey 是否按下shift键
事件委托机制（事件代理）
概述：将对应的事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。
示例
//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function (e) {
e = e || window.event
//判断当前触发元素是否为li
if (e.target.tagName == 'LI') {
//排他思想
//把所有的li的class清除
for (var item of this.children) {
item.className = ''
}
e.target.className = 'active'
}
}
事件委托的运用场景
在一个父元素里面有多个子元素要添加相同的事件的时候
标签：触发,鼠标,元素,js,按下,事件,处理函数 From： https://www.cnblogs.com/tch001/p/16825957.html