JavaScript笔记(16)之事件高级

y191024

发布于 2022-09-20 20:13:44

6310

事件高级

今天学习事件高级,下面是我们的学习目标

注册事件概述

给元素添加事件,称为注册事件或者绑定事件

注册事件有两种方法:传统方式和方法监听注册方式

传统注册方式

利用on开头的事件如onclick
btn.onclick = function() {}
特点:注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数(比如说写两次btn.onclick但分别设置一个alert('say hi '))和一个alert('say hello'),最后执行的肯定是'say hello'.

方法监听注册方式

eventTarget.addEventListener( type,listener[ , useCapture] )

eventTarget.addEventListener(type,listener[, useCapture])方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数

该方法接收三个参数

但是他就可以同时设置很多个事件函数:

删除事件(解绑事件)

比如我们想要点击完一个div盒子以后弹出对话框,但是后面再点击就不会弹出,那么我们就需要学习删除事件.

传统注册方式

eventTarget.onclick = null;

方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);

一开始是这种想法,不过后来才发现是不行的.

我们得换种思路,将我们的事件封装成函数,写入监听注册中,这样就能删除事件也可以直接将函数写入(但是记住不要加( )!!! ).

DOM事件流

事件流描述的是从页面中接收事件的顺序.

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流.

比如我们给div注册了点击事件:

DOM事件分为三个阶段:

事件冒泡: IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程

事件捕获: 网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程.

注意:

JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener(type,listener[, useCapture]) 第三个参数是true,表示在事件捕获阶段调用事件处理程序;如果是false,(不写默认就是false),表示事件在冒泡阶段调用事件处理程序.

(这一块好难懂...)

我们试一下就能理解了

事件对象

我们以前写这个点击事件的时候,function后面的()是空的,现在我们在里面写入一个event(里面写什么都可以,但是比较常见的是event/evt/e)

event就是一个事件对象,写到我们的侦听函数里面的小括号里,当形参来看.
事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
事件对象:是我们事件的一系列相关数据的集合,和事件相关的,比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标等,如果是键盘事件就包含的键盘事件的信息,比如判断用户按下了哪个键
事件对象也有兼容性的问题,IE678通过window.event 兼容性的写法: e || window.event

官方解释: event对象代表事件的状态,比如键盘按键,鼠标的位置,鼠标按钮的状态

简单理解: 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法

事件对象的常见属性和方法