认识达内从这里开始

事件是我们在学习JavaScript编程开发的时候需要重点去学习的一个功能应用，而鼠标的点击停留等动作的反馈就是事件的应用表现之一，下面我们就一起来了解一下事件应用的具体内容吧。

1、事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。event对象会被作为一个参数传递给事件监听的回调函数。我们可以通过这个event对象来获取到大量当前事件相关的信息：

type(String)—事件的名称

target(node)—事件起源的DOM节点

currentTarget?(node)—当前回调函数被触发的DOM节点(后面会做比较详细的介绍)

bubbles(boolean)—指明这个事件是否是一个冒泡事件(接下来会做解释)

preventDefault(function)—这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。比如阻止元素的click事件加载一个新的页面

cancelable(boolean)—这个变量指明这个事件的默认行为是否可以通过调用event.preventDefault来阻止。

stopPropagation(function)—取消事件的进一步捕获或冒泡，bubbles为true使用这个方法

eventPhase：返回一个数字，表示事件目前所处的阶段，0为事件开始从DOM表层向目标元素传播，1为捕获阶段，2为事件到达目标元素，3为冒泡阶段。

此外，事件对象还可能拥有很多其他的属性，但是他们都是针对特定的event的。比如，鼠标事件包含clientX和clientY属性来表明鼠标在当前视窗的位置。

2、偏移量

通过以下4个属性可以取得元素的偏移量。

(1)offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。

(2)offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。

(3)offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

(4)offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

3、鼠标事件

DOM3级定义了9个鼠标事件：

click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。

dbclick：用户双击鼠标时触发

mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。

mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。

mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。

mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。

mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。

mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。

mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。

传递给鼠标事件处理程序的事件对象有clientX和clientY属性，它们指定了鼠标指针相对于包含窗口的坐标。加入窗口的滚动偏移量，就可以把鼠标位置转换成文档坐标。

4、拖拉事件

(1)drag事件

drag事件在源对象被拖拉过程中触发。

(2)dragstart，dragend事件

dragstart事件在用户开始用鼠标拖拉某个对象时触发，dragend事件在结束拖拉时触发。

(3)dragenter，dragleave事件

dragenter事件在源对象拖拉进目标对象后，在目标对象上触发。dragleave事件在源对象离开目标对象后，在目标对象上触发。

(4)dragover事件

dragover事件在源对象拖拉过另一个对象上方时，在后者上触发。

(5)drop事件

当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发drop事件。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。