javascript事件总结

目录

1. 事件是什么,事件可以干什么

2. 事件的三要素是什么

3. 绑定事件的两种方式

4. 事件的三个阶段

5. 事件对象

6. 事件类型

7. 事件的三个级别(略) dom0 dom2 dom3

8. 移除事件(略)

事件是什么,事件可以干什么(1)

1. HTML 事件是发生在 HTML 元素上的事情。

2. 事件可以由浏览器触发(比如页面加载完毕),也可以由用户触发(比如点击事件)

3. 通过事件,我们可以使用js和html页面上的内容进行交互

事件的三要素是什么(2)

1. 事件源,在谁身上发生事情

2. 事件类型

3. 事件处理程序,事件发生了,要怎么处理,事件处理程序也叫监听器或事件句柄

绑定事件的两种方式(3)

1. 使用on来绑定事件

2. 使用addEventListener绑定事件

3. 两者的区别

   1. on只能绑定一个处理程序,addEventListener可以绑定多个处理程序

   2. addEventListener可以控制触发阶段

事件的三个阶段(4)

image

1. 捕获阶段(了解)

2. 目标阶段

3. 冒泡阶段

事件冒泡(5)

1. 事件冒泡是怎么回事

2. 阻止事件冒泡

3. 事件托管(事件冒泡的应用)

事件对象(6)

1. event

2. event.target和event.currentTarget

3. event和坐标

事件类型(7)

1. click

2. touch touchstart touchmove touchend

3. tap,longtap

4. dblclick

5. input

6. change

7. onload

8. keydown,keyup,keypress

9. mouseover mouseout blur focus

JavaScript是一种事件驱动的语言，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。分为触发和响应

• 触发：交互的某个瞬间

• 响应：就是要执行的某些代码要达到一定的效果

事件三要素

事件源 要给谁注册事件(一般是某个标签或某些标签)

事件类型 要给事件源注册什么样的事件

事件处理程序 要执行的代码，去达到某种效果 函数或是匿名函数(也叫监听器或事件句柄)

注册事件

• On的方式注册事件

• addEventListener()

移除事件

dom.removeEventListener(type,listener) 高级浏览器支持的方式

事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

image

事件委托

本来要自己做的事，可以委托其它的标签去做，这种方式叫做事件委托

比来要给li注册的事件，现在只需要注册到ul即可，通过事件冒泡的方式，也可以达到相应的效果。

阻止事件冒泡

取消冒泡和捕获: stopPropagation() 取消冒泡和捕获

事件捕获 刚好和事件委托相反

是从DOM的最外层到目标对象执行触发

而冒泡是从当前对象往DOM的最顶级元素去执行触发

image

事件的三个阶段

image

事件对象event

任何事件触发的时候，程序都会提供给我们一个事件对象event

存储着一些与事件相关的信息

也是有兼容生的，高级浏览器是支持的，但是IE8及以下的浏览器的是支持的window.event

Var e = event || window.event;

三个坐标

event.clientX/Y 可视区，以浏览器可视区的左上角为基准

event.pageX/Y 以页面的左上角为基准

event.screenX/Y 以电脑屏幕的左上角为基准

pageX/Y是有兼容性的，

event.pageX/Y = event.clientX/Y+event.scrollTop/Left

DOM事件的Event对象的常见应用：

• event.preventDefault() : 阻止默认事件

• event.stopPropagation(): 阻止冒泡

• event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

• event.target: 返回触发事件的元素

• event.currentTarget: 返回绑定事件的元素

DOM 的事件级别

image

DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件

DOM的自定义事件：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n70" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> var eve = new Event('eventName')
dom.addEventListener('eventName',function(){
}) //注册事件
dom.dispatchEvent(eve); // 触发事件，

---

这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)</pre>

其他事件类型：

Onmouseover 鼠标移入的事件

Onmouseout 鼠标离开的事件

Onfocus 获得焦点的事件

Onblur 失去焦点的事件

Ondblclick 鼠标的双击事件

移动端的事件

click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟

touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

欢迎加微信群交流（若二维码过期请加个人微信）

技术交流群 我是老胡