JavaScript中的鼠标事件及事件对象

1. 鼠标事件

1. mouseover和mouseout

   当鼠标进入元素区域内触发和离开元素区域内触发

   这两个事件是冒泡的,就是当前事件会冒泡给父元素,一层一层冒泡

2. mouseenter和mouseleave

   与mouseover和mouseout效果一致,但是这两个事件不冒泡

2. 事件对象的属性

2.1 常用属性

1. bubble

   • 返回的是布尔值,表示事件是否冒泡,true表示冒泡,false表示不冒泡

2. target

   • 表示事件发生的目标元素,就是当前点击区域的最内侧的元素

3. currentTarget

   • 表示事件源,事件是由谁注册的,currentTarget就是谁

4. eventPhase

   • 返回的1,2,3,1表示当前的对象处于捕获阶段,2表示处于目标阶段,3表示处于冒泡阶段

5. type

   • 返回的是当前事件的类型

6. isTrusted

   • 返回的是布尔值,true表示事件由浏览器创建,false表示事件由开发人员自己创建

7. e.stopPropagation();

   • 表示阻止当前事件的进一步捕获或冒泡,但是同一层的不能阻止,同层的阻止可以使用e.stopImmediatePropagation();

8. e.preventDefault()

   • 表示取消事件的默认行为

2.2 与坐标相关的属性

1. e.offsetX e.offsetY 坐标原点是当前点击区域最内侧元素的左上角(target的左上角)

2. e.clientX e.clientY 坐标原点是浏览器的左上角(视窗)

3. e.pageX e.pageY 坐标原点是当前页面的左上角,距离页面的最左上角多远就是哪个坐标

4. e.screenX e.screenY 坐标原点是当前显示器屏幕的左上角(包括了菜单栏之类的)