文档详情

阶段二javascript基础监听.pdf

发布:2024-10-14约5.2千字共17页下载文档
文本预览下载声明

coderwhy认识(Event)

◼Web页面需要经常和用户之间进行交互,而交互的过程中我们可能想要捕捉这个交互的过程:

比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置;

浏览器需要一条JavaScript代码和之间的桥梁;

当某个发生时,让JavaScript可以相应(执行某个函数),所以我们需要针对编写处理程序(handler);

◼如何进行呢?

方式一:在script中直接(很少使用);

方式二:DOM属性,通过元素的on来;

方式三:通过EventTarget中的addEventListener来;

coderwhy常见的列表

◼鼠标:

click——当鼠标点击一个元素时(触摸屏设备会在点击时生成)。

mouseover/mouseout——当鼠标指针移入/离开一个元素时。

mousedown/mouseup——当在元素上按下/释放鼠标按钮时。

mousemove——当鼠标移动时。

◼键盘:

keydown和keyup——当按下和松开一个按键时。

◼表单(form)元素:

submit——当者提交了一个form时。

focus——当者聚焦于一个元素时,例如聚焦于一个input。

◼Document:

DOMContentLoaded——当HTML的加载和处理均完成,DOM被完全构建完成时。

◼CSS:

transitionend——当一个CSS动画完成时。

coderwhy认识流

◼事实上对于有一个概念叫做流,为什么会产生流呢?

我们可以想到一个问题:当我们在浏览器上对着一个元素点击时,你点击的不仅仅是这个元素本身;

这是因为我们的HTML元素是存在父子元素叠加层级的;

比如一个span元素是放在div元素上的,div元素是放在body元素上的,body元素是放在html元素上的;

coderwhy冒泡和捕获

◼我们会发现默认情况下是从最内层的span向外依次传递的顺序,这个顺序我们称之为冒泡(EventBubble);

◼事实上,还有另外一种流的方式就是从外层到内层(body-span),这种称之为捕获(EventCapture);

◼为什么会产生两种不同的处理流呢?

这是因为早期浏览器开发时,不管是IE还是Netscape公司都发现了这个问题;

但是他们采用了完全相反的流来对进行了传递;

IE采用了冒泡的方式,Netscape采用了捕获的方式;

◼那么我们如何去捕获的过程呢?

coderwhy捕获和冒泡的过程

◼如果我们都,那么会按照如下顺序来执行:

◼捕获阶段(Capturingphase):

(从Window)向下走近元素。

◼目标阶段(Targetphase):

到达目标元素。

◼冒泡阶段(Bubblingphase):

从元素上开始冒泡。

◼事实上,我们可以通过event对象来获取当前的阶段:

eventPhase

◼开发中通常会使用冒泡,所以捕获了解即可。

coderwhy对象

◼当一个发生时,就会有和这个相关的很多信息:

比如的类型是什么,你点击的是哪一个元素,点击的位置是哪里等等相关的信息;

那么这些信息会被封装到一个Event对象中,这个对象由浏览器创建,称之为event对象;

该对象给我们提供了想要的一些属性,以及可以通过该对象进行某些操作;

◼如何获取这个event对象呢?

event对象会在传入的处理(eventhandler)函数回调时,被系统传入;

我们可以在回调函数中拿到这个event对象;

◼这个对象中都有哪些常

显示全部
相似文档