Web的事件知识点有哪些
本篇内容主要讲解“Web的事件知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Web的事件知识点有哪些”吧!
网站前端页面设计会用DIV+CSS架构,布局出来的网站外观简洁大气。HTML静态,H5高端网站建设+CSS3网站,自适应电脑、手机、平板,符合用户体验的习惯,更容易与用户产生互动。专业网站设计公司的服务理念是“高性价比建站,让企业网站具备营销价值,促进长期合作共赢模式”。
web中的事件
事件并不是JavaScript的核心部分,他们是在浏览器的Web Api中定义的。下面列举的几种情况,都属于发生了事件。
用户在某个元素上点击鼠标或悬停光标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。
播放、暂停、关闭视频。
发生错误。
我们可以在代码中使用事件处理器来处理各种事件。
事件模型
假设我们有这么一段html代码:
Shady Grove | Aeolain |
Over the River, Charile | Dorian |
如果我们点击over the Rive, Charile,整个事件流程如下:
事件会经历三个阶段,上图中分别由红色、蓝色、绿色标出。第一阶段为红色,事件流从根元素一直走到点击的目标元素,这个过程称为捕获。第二阶段为蓝色。这个阶段中,会处理点击事件,为事件加上各种属性等。第三阶段为绿色,事件又回重新回到根元素,这个过程称为冒泡。在整个事件流中,我们在事件流经过的任何元素上,都能监听到该事件,从而进行处理。
一般建议在冒泡阶段处理事件,这样可以最大限度的兼容各种浏览器。
注意:blur、focus、load、unload 等几个事件不会冒泡。
原因是在于:这些事件仅发生于自身上,而它的任何父节点上的事件都不会产生,所有不会冒泡。
我们可以查看事件的bubbles属性,来判断该事件是否可以冒泡。
事件处理
EventTarget
EventTarget是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。Web中的所有事件处理器都是由EventTarget"提供"的。
addEventListener
该方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。其标准语法如下:
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, options]); target.addEventListener(type, listener[, useCapture]); 预览
type: 字符串。表示事件类型,比如: click。
listener:函数。事件触发时的回调函数。这个函数会接受一个Event事件对象。这个Event事件对象中,包含了以下重要的属性和方法(这里只列举出常用的)
options :对象。指定一个listener的配置参数。
useCapture:布尔值,可选。默认为false,事件在冒泡过程中触发listener。
removeEventListener
删除使用addEventListener注册到target上的事件。标准语法:
target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);
为了提高页面性能,我们在处理完某事件,并且不用继续监听该事件时,可以将之前注册的事件监听函数移除。需要注意的是,如果注册事件时,在捕获或冒泡阶段均进行了监听,那么移除时需要分别移除。
currentTarget 与 target的区别
在事件处理函数中,我们经常会使用到事件的这两个属性。currentTarget表示注册事监听的对象。target表示事件起源的对象。举个例子:
child1