DOM模型(七)—— 事件类型

本节介绍各种常见的浏览器事件。

一、鼠标事件


鼠标事件指与鼠标相关的事件,主要有以下一些。

1.1、click事件,dblclick事件

当用户在Element节点,document节点,window对象上单击鼠标(或按下回车键)时,click事件触发。

“鼠标单击”定义为,用户在同一位置完成一次mousedown动作和mouseup动作。它们的触发顺序是:mousedown首先触发,mouseup接着触发,click最后触发。

下面是一个设置click事件监听函数的例子。

div.addEventListener("click", function( event ) {
  // 显示在该节点,鼠标连续点击的次数
  event.target.innerHTML = "click count: " + event.detail;
}, false);

dblclick事件当用户在element、document、window对象上,双击鼠标时触发。该事件在mousedownmouseupclick之后触发。

1.2、mouseup事件,mousedown事件,mousemove事件

mousedown事件在按下鼠标键时触发。
mouseup事件在释放按下的鼠标键时触发。
mousemove事件当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件的监听函数做一些限定,比如限定一段时间内只能运行一次代码。

1.3、mouseover事件,mouseenter事件

mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。

两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。

// HTML代码为
// 
    //
  • item 1
  • //
  • item 2
  • //
  • item 3
  • //
var test = document.getElementById('test'); // 进入test节点以后,该事件只会触发一次 // event.target 是 ul 节点 test.addEventListener('mouseenter', function (event) { event.target.style.color = 'purple'; setTimeout(function () { event.target.style.color = ''; }, 500); }, false); // 进入test节点以后,只要在子Element节点上移动,该事件会触发多次 // event.target 是 li 节点 test.addEventListener('mouseover', function (event) { event.target.style.color = 'orange'; setTimeout(function () { event.target.style.color = ''; }, 500); }, false);

1.4、mouseout事件,mouseleave事件

mouseout事件和mouseleave事件,都是鼠标离开一个节点时触发。

两者的区别是,mouseout事件会冒泡,mouseleave事件不会。子节点的mouseout事件会冒泡到父节点,进而触发父节点的mouseout事件。mouseleave事件就没有这种效果,所以离开子节点时,不会触发父节点的监听函数。

1.5、contextmenu事件

contextmenu事件在一个节点上点击鼠标右键时触发,或者按下“上下文菜单”键时触发。

二、MouseEvent对象


2.1、概述

2.1、概述

2.1、概述

2.1、概述

2.1、概述

三、wheel事件


wheel事件是与鼠标滚轮相关的事件,目前只有一个wheel事件。用户滚动鼠标的滚轮,就触发这个事件。

该事件除了继承了MouseEvent、UIEvent、Event的属性,还有几个自己的属性。

  • deltaX:返回一个数值,表示滚轮的水平滚动量。
  • deltaY:返回一个数值,表示滚轮的垂直滚动量。
  • deltaZ:返回一个数值,表示滚轮的Z轴滚动量。
  • deltaMode:返回一个数值,表示滚动的单位,适用于上面三个属性。0表示像素,1表示行,2表示页。

浏览器提供一个WheelEvent构造函数,可以用来生成滚轮事件的实例。它接受两个参数,第一个是事件名称,第二个是配置对象。

var  syntheticEvent = new WheelEvent("syntheticWheel",  {"deltaX": 4, "deltaMode": 0});

四、键盘事件


五、进度事件


六、拖拉事件


七、触摸事件


触摸API由三个对象组成。

Touch
TouchList
TouchEvent

八、表单事件


8.1、Input事件,select事件,change事件

以下事件与表单成员的值变化有关。
(1)、input事件
input事件当