本文已参与『新人创作礼』活动，一起开启掘金创作之路
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
1.元素事件概念
1.1什么是事件
事件是发生并得到处理的操作，即：事情来了，然后处理。 如：
- 电话铃声响起（事件发生） ---需要接电话（事件处理）
- 学生举手请教问题（事件发生） —需要解答（事件处理）
- 9点半提醒大家开始上课（事件发生）---打开直播开始上课（事件处理）
- 按钮被点击了（事件发生）， ---网页会反馈（事件处理）
1.2事件绑定
例子：提前约定好时间做什么事情,确认双方都有时间,第二天时间到了(事件发生)--->开心赴约(事件处理)
1.3事件绑定模型:
- JavaScript 有两种事件绑定模型：内联模型、外联(脚本)模型.
1.3.1事件绑定—内联模式
- 这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函 数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但 它是和 HTML 混写的， 并没有与 HTML分离。
<button onClick="btnClick('参数')"> 内联模式 </button>
1.3.2事件绑定—外联(脚本)模式
- 由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript中处理事件。这种处理方式就是外联(脚本)模型。
window.onload = function() {
var onBtn = document.getElementById("btn")
onBtn.onClick = function() {
alert("外联模式")
}
}
2.事件类型
2.1 鼠标事件 MouseEvent
// 事件前面都有'on'字段
* click 点击（移动端click被识别为单击）
* dblclick 双击
* mousedown 鼠标按下
* mouseup 鼠标抬起
* mousemove 鼠标移动
* mouseover 鼠标滑过（有冒泡机制）
* mouseout 鼠标滑出（有冒泡机制）
* mouseenter 鼠标进入
* mouseleave 鼠标离开
* mousewhell 鼠标滚轮滚动
2.2键盘事件
* keydown 按下某个键 // 在此函数里拿到input框的值是上一次的值,因为当前按下的那一次函数就触发了,那时候最新的内容还没有输入到input框里
* keyup 抬起某个键 // 在此函数里拿到input是最新的内容,因为当函数执行的时候
* keypress 除Shift/Fn/CapsLock键以外，其它键按住（连续触发） // 拿到的也是上一次的值
// 键盘事件可以给表单元素绑定,这时候的使劲按仅仅是针对于当期哪的表单元素的, 只有当光标在input框里的时候,才会触发对应的事件
// 但是如果你给window或者body绑定了键盘事件,那你在哪里敲击键盘都会触发事件。
2.3移动端手指事件
* 单手指事件模型 Touch
* touchstart 手指按下
* touchmove 手指移动
* touchend 手指松开
* touchcancel 操作取消（一般应用于非正常状态下操作结束）
* 多手指事件模型 Gesture
* gesturestart // 当一个手指放在屏幕上时，会触发 touchstart 事件。
// 如果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件
* gesturechange / gestureupdate // 两个手指滑动将会触发
* gestureend // 手指移开， 就会触发 gestureend 事件
* gesturecancel // 不管几个手指只要触发屏幕就会执行此事件
2.4表单元素常用事件
* focus 获取焦点
* blur 失去焦点
* change 内容改变
* input 事件在用户输入时触发。
* onkeydown:当键盘按下时，触发的事件；获取到上一次的值；
* onkeyup:当键盘抬起获取到最新的值；
// 在键盘上，每一个键盘的键都有一个对应的keyCode;根据keyCode可以判断当前点击的是哪一个键；
2.5音视频事件
* canplay 可以播放（资源没有加载完，播放中可能会卡顿）
* canplaythrough 可以播放（资源已经加载完，播放中不会卡顿）
* play 开始播放
* playing 播放中
* pause 暂停播放
2.6其他常用事件
* load 资源加载完
* DOMContentloaded DOM加载完执行
* unload 资源卸载
* beforeunload 当前页面关闭之前
* error 资源加载失败
* scroll 滚动事件
* readystatechange AJAX请求状态改变事件
* contextmenu 鼠标右键触发
* ......
事件详情
box.onclick = function(e){
// 当用户通过键盘或者鼠标去触发一些对应的事件的时候,
// 浏览器会把当前事件的一些信息以实参的方式传递给当前的方法
// 1.clientX:当前鼠标点击的位置距离浏览器左侧的宽度
// 2.clientY:当前鼠标点击的位置距离浏览器上测的高度
// 3.offsetX: 当前鼠标点击的位置距离当前的盒子的最左侧的长度
// 4.offsetY: 当前鼠标点击的位置距离当前的盒子的最上侧的高度
// (相对于body来说)
// 5.pageX: 当前鼠标点击的位置距离body最左侧的长度
// 6.pageY: 当前鼠标点击的位置距离body最顶部的高度
// 7.target: 目标源,当期哪点击那个元素,target就是谁
// 8. type:事件类型 ('click')
// 9. cancelBubble = true:关闭冒泡
// 10. e.stopPropagation() //阻止冒泡传播
// 11. returnValue = false PreventDafault() //阻止默认事件
// 12. keyCode:键码值
// 事件委托就是事件冒泡机制的一种应用
}
文章有错误或者遗漏地方的小伙伴可以在评论区评论哦~
