事件和事件绑定

最新推荐文章于 2024-09-16 09:28:38 发布

小白Hard

最新推荐文章于 2024-09-16 09:28:38 发布

阅读量564

点赞数

分类专栏： js 文章标签： javascript dom 事件模块

本文链接：https://blog.csdn.net/lly193426/article/details/108550364

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.DOM

什么是事件：事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行。
什么是事件绑定：给元素默认的事件行为绑定方法，这样可以在行为触发的时候，执行这个方法。
鼠标事件
click：点击事件（PC：频繁点击N次，触发N次点击事件）单击事件（移动端：30ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端有300ms延迟）
dbclick：双击事件
contextmenu：鼠标右键点击触发
mousedown：鼠标按下
mouseup：鼠标抬起
mousemove：鼠标移动
mouseover：鼠标滑入
mouseenter：鼠标进入
mouseleave：鼠标离开
mousewheel：鼠标滚轮滚动
键盘事件
keydown：键盘按下
keyup：键盘抬起
keypress：长按（除了Shift/Fn/CapsLock键之外）
手指事件
【Touch Event 单手指事件模型】
touchstart：手指按下
touchmove：手指移动
touchend：手指松开
【Gesture Event 多手指事件模型】
表单事件
focus：获取焦点
blur：失去焦点
submit：表单提交（前提：表单元素都包含在form中，并且点击的按钮是submit)
reset：表单重置（前提：表单元素都包含在form中，并且电机的按钮是reset)
select：下拉框内容选中
change：内容改变
input：移动端中经常使用的，监控文本框中的内容随着输入的改变而触发
资源事件
load：加载成功（window.onload / img.onload)
error：加载失败
beforeunload：资源卸载之前（window.onbeforeunload 页面关闭之前触发）
css3动画事件
transitionend：transition动画结束
transitionstart：transition动画开始
transitionrun：transition动画运行中
视图事件
resize：元素（浏览器）大小改变
scroll：滚动条滚动
DOM0级事件绑定
语法：[元素].on[事件]=[函数]
document.body.οnclick=null;
原理：每一个DOM元素对象的私有属性上都有很多类似于“onxxx”的私有属性，我们给这些代表事件的私有属性赋值，就是DOM0事件绑定。
【如果没有对应时间的私有属性值则无法基于这种办法实现事件绑定。
【只能给当前元素的某个事件行为绑定一个方法，绑定多个方法，最后一个操作会覆盖以往的
【执行效率快，而且开发者使用起来方便
DOM2级事件绑定
语法：[元素].addEventListener([事件],[方法],[捕获/冒泡])
document.body.addEventListener(‘click’,fn1,false)
移除：[元素].removeEventListener([事件],[方法],[捕获/冒泡]) 但是需要参数和绑定的时候一样
document.body.removeEventListener(‘click’,fn1,false)
原理：每一个DOM元素都会基于__proto__查找到EventTarget.prototype上的addEventListener/removeEventListener等方法，但是基于这些方法实现事件的绑定和移除，DOM2事件绑定采用事件池机制；
DOM2事件绑定，绑定的方法一般不是匿名函数，主要目的是方便移除事件绑定的时候使用。
凡是浏览器提供的事件行为，都可以基于这种模式完成事件的绑定和移除（例如：window.onDOMContentLoaded是不行的，因为没有这个私有的事件属性，但是可以window.addEventListener(‘DOMContentLoaded’,func)这样是可以的）
可以给当前元素的某个事件类型绑定多个“不同”的方法（进入到事件池），这样当事件行为触发，会从事件池中依次（按照绑定的顺序）取出对应的方法然后执行。
事件对象：存储当前事件操作及触发的相关信息的（浏览器本身记录的，记录的是当前这次操作的信息，和在哪个函数中无关）
鼠标事件对象：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
which / keyCode：获取按键的键盘码
方向键：“左37 上38 右39 下40”
Space：32
BackSpace：8
Del：46 MAC电脑中没有BackSpace，delete键是8
Enter：13
Shift：16
Ctrl：17
Alt：18
altKey：是否按下alt键（组合按键）
ctrlKey：是否按下ctrl键（组合按键）
shiftKey：是否按下shift键（组合按键）
TouchEvent：手指事件对象
changedTouches / touches：都是用来记录手指的信息的，平时常用的是changedTouches
手指按下、移动、离开屏幕changedTouches都存储了对应的手指信息，哪怕离开屏幕后，存储的也是最后一次手指在屏幕中的信息；而touches在手指离开屏幕后，就没有任何的信息了；=》获取的结果都是一个TouchList集合，记录每一根手指的信息。
ev.changedTouches[0] 第一根手指的信息
clientX / clientY
pageX / pageY
默认行为：浏览器会赋予元素很多默认的行为操作。
鼠标右键菜单
点击A标签实现页面的跳转
部分浏览器会记录输入记录，在下一次输入的时候有模糊匹配
键盘按下会输入内容
可以基于ev.preventDefault()来禁用。
A标签的默认行为：
页面跳转、锚点定位（定位到当前页面指定ID的盒子位置，URL地址中会加入HASH值）

<a href="#box" id="link">哈哈</a>
<div class="box" id="box"></div>

阻止默认行为，如下：

<a href="javascript:;" id="link">哈哈</a>

<a href="http://www.baidu.com/" id="link">哈哈</a>
<script>
link.onclick=function(ev) {
ev.preventDefault();
//或者是
return false;
}
</script>

二.事件的传播机制
在这里插入图片描述

DOM0事件绑定中给元素事件行为绑定的方法，都是在目标阶段/冒泡阶段触发的。
DOM2事件绑定可以控制在绑定方法在捕获阶段触发（无实际意义）
元素.addEventListener(事件，方法，false/true)
最后一个参数默认是false：控制方法是在冒泡阶段触发执行的，如设置为true可以控制在捕获阶段触发执行。
1.

<div class="box">
	<div class="outer">
		<div class="inner">
		</div>
	</div>
</div>
<script>
//因为点击事件行为存在冒泡传播机制，所以不论点击INNER/OUTER/BOX，最后都会传播到BODY上，触发BODY的CLICK事件行为，把其绑定的方法执行。
//在方法执行接受到的事件对象中，有一个target/srcElement属性（事件源），可以知道当前操作的是谁，此时方法中可以根据事件源的不同，做不同的处理。
//此机制就是“事件委托/事件代理”：利用事件的冒泡传播机制，我们可以把一个“容器A”中所有后代元素的某个“事件行为E”触发要做的操作，委托给A的事件行为E，这样后期只要触发A中任何元素的E行为，都会传播到A上，吧给A绑定的方法执行，再方法执行的时候，基于事件源不同做不同的处理。

document.body.onclick=function (ev){
let target=ev.target,
	targetClass=target.className;
if(targetClass==="inner"){
	console.log("INNER");
	return;
}
if(targetClass==="outer"){
	console.log("OUTER");
	return;
}
if(targetClass==="box"){
	console.log("BOX");
	return;
}
}
</script>