Event 对象,你很了解吗?

还记得上一次使用 event 对象是什么场景吗?
我猜一定是用来获取 target 或者用来阻止事件冒泡吧

event.stopPropagation()

最近在看了一些代码和文章之后,发现 Event 对象并没有想象的函数调用中的参数太少那么简单,当然还是很简单,它还有更多丰富的用法!

前言

Event 对象就是事件对象数组初始化,它是在事件发生之后产生的,数组指针作为参数传给监听函数浏览器下载。它是浏览器原生支持的一个构造函数,html代码所有的事件都是这个对象的实例

const event = new Event(type, options)

Event 构造函数接收两个参数,第像素画一个参数是像素画生成器事件的名称,第二个参数是一个配置对象,主数组公式要有三个属性

  • bubbles:是否冒泡
  • cancelable,事件是否可以被取消,也就是能不能被 preventDefault取消这个事件
  • composed,是否会在 DO浏览器M 根节点之外触发侦听器像素工厂

以上几html个属性的默认值都是 false
下面就通过像素工厂构造函数像素射击下载方式创建了一个事件,我们可以用 disphtml个人网页完整代码atchEvent 来触发这个事件

const event = new Event(
  'watch',
  {
    'bubbles': true,
    'cancelable': false
  }
)
document.dispatchEvent(event)

实例属性

E像素工厂vent.eventPhase

Event.eventPhase 属性返回一个整数常量,表示事件目前所处的阶段

const phase = event.eventPhase

返回值有 4 个状态

  • 0 事件没有发生
  • 1 事件处于捕获阶段、
  • 2 事件到达数组c语言目标节点
  • 3 事件处于冒泡阶段浏览器历史上的痕迹在哪里

Event.cancelable & Event.cancelBubble

Event.cancelable 返回布尔值,表示事件是否可以被取消
大多数事件都是可以被取消的,但是使用 Event 构造函数生成的事件,默认是不可以取消的

const evt = new Event('foo');
evt.cancelable  // false

值得一提的数组指针是,当 cancelable 返回 false 时,使浏览器的历史记录在哪e浏览器的历史vent.preventDefhtml个人网页完整代码ault() 会没有任何效果
E浏览器历史记录设置vent.cancelBubble 也是返回当前是否阻止冒泡,设置为 true浏览器怎么打开网站 和执行 stopPropagation 一样

Event.currentTarget & Event.target

在事件发生以后函数调用可以作为一个函数的形参,会经过捕获和冒泡两个阶段,依次通过多个 DOM 节点。

  • event.html标签属性大全target 表示触发事件的那个节点最初发生的节点,不会随事件的传播而变化
  • event.currentTarget 表示事件当前正在通过的节点,也就是当前监听函数所在的节点,值会变化

事件传播过程中,不html简单网页代码同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的。

Event.type

返回事件的类型,在生成事件的时候就指定的,只读属性

const event = new Event('ljc')
event.type // 'ljc'

Event.timeStamp

返回事件数组排序发生的html网页制作时间戳,相对于页面加载成功开始计算的

const evt = new Event('ljc');
evt.timeStamp // 111.11

返回值的精度取决于浏览器的设置html
我们可以利用这个属性来计算鼠标移动的速度,每秒移动多少的像素

Event.函数调用可以出现在表达式中吗detail

这个属性是浏览器事件html网页制作才具有的,返回一个数值。具体和事件类型有关,比如

  • 点击事件,detail 返数组公式回的就是鼠标按下的次数(1表示单击HTML,2表示双击,3表示三击)
  • 滚轮事件,detail 返回的是滚轮正向滚动的距离,或负向滚动的距离浏览器数据如何恢复,返函数调用回值是 3 的倍数

Event.isTrusted

表示当前事件是否为真实用户行为产生,比如 click 事件是用户产生的,会返回 true
Event 构造函数生成的事件,会返回 false

实例方法

preventDefault & stopPropagation

阻止默认事件
阻止冒泡

stopImmediatePrhtml简单网页代码apagation

Event.stopImmediatePropaga数组tion 方法阻止同一个事件的其他监听函数被调用,不管监听函数定义在当前节点还是其他节点。也就是说,该方法阻止事件的传播,比 Event.stopPropagation() 更彻底。
如果同浏览器一个节点对于同一个事件指定了多个监听函数,这些函数会根据添加的顺序依次调用像素工厂只要其中有一个监听函数调用Event.stopImmediatePropagation 方法,其他的监听函数就不会再执行了。

function l1(e){
  e.stopImmediatePropagation();
}
function l2(e){
  console.log('hello world');
}
el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);

上面代码在 el 节点上,为 click 事件添加了两个监听函数 l1 和 l2 。由于 l1 调用浏览器网站删除了怎么恢复event.stopImmediatePropagation 方法,所以 l2 不会被调用。

composedPath

返回一个数组,成员是事件的最深层节点和依次冒泡经过的所有上层节点

<div>
	<a></a>	
</div>
const div = document.querySelector('div')
div.addEventListener('click', (e) => {
	console.log(e.composedPath())
})
// [a, div, body, html, document, window]

click 节点的最深处是 a 节点,最上层是 window,因此 path 是从 a 到 window


以上就是本文的全部内容啦,希望能让你对 Event 对象有更多的认识!

发表评论

提供最优质的资源集合

立即查看 了解详情