- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

JavaScript-事件（二）

Johan Tian 发表于 2022/07/13 13:50:18 2022/07/13

【摘要】 3.5 MouseEvent.screenX 相对屏幕X坐标，MouseEvent.screenY 相对屏幕Y坐标MouseEvent.screenX属性返回鼠标位置相对于屏幕左上角的水平坐标（单位像素），MouseEvent.screenY属性返回垂直坐标。这两个属性都是只读属性。// HTML 代码如下// <body onmousedown="showCoords(event)">f...

3.5 MouseEvent.screenX 相对屏幕X坐标，MouseEvent.screenY 相对屏幕Y坐标

MouseEvent.screenX属性返回鼠标位置相对于屏幕左上角的水平坐标（单位像素），MouseEvent.screenY属性返回垂直坐标。这两个属性都是只读属性。

// HTML 代码如下
// <body onmousedown="showCoords(event)">
function showCoords(evt) {
  console.log(
    'screenX value: ' + evt.screenX + '\n',
    'screenY value: ' + evt.screenY + '\n'
  );
}

3.6 MouseEvent.offsetX 偏移量X，MouseEvent.offsetY 偏移量Y

MouseEvent.offsetX属性返回鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素），MouseEvent.offsetY属性返回与目标节点上方的padding边缘的垂直距离。这两个属性都是只读属性。

/* HTML 代码如下
  <style>
    p {
      width: 100px;
      height: 100px;
      padding: 100px;
    }
  </style>
  <p>Hello</p>
*/
var p = document.querySelector('p');
p.addEventListener(
  'click',
  function (e) {
    console.log(e.offsetX); // 包含padding
    console.log(e.offsetY);
  },
  false
);

上面代码中，鼠标如果在p元素的中心位置点击，会返回150 150。因此中心位置距离左侧和上方的padding边缘，等于padding的宽度（100像素）加上元素内容区域一半的宽度（50像素）。

3.7 MouseEvent.pageX 文档X坐标，MouseEvent.pageY 文档Y坐标

MouseEvent.pageX属性返回鼠标位置与文档左侧边缘的距离（单位像素），MouseEvent.pageY属性返回与文档上侧边缘的距离（单位像素）。它们的返回值都包括文档不可见的部分。这两个属性都是只读。

/* HTML 代码如下
  <style>
    body {
      height: 2000px;
    }
  </style>
*/
document.body.addEventListener(
  'click',
  function (e) {
    console.log(e.pageX);
    console.log(e.pageY);
  },
  false
);

上面代码中，页面高度为2000像素，会产生垂直滚动条。滚动到页面底部，点击鼠标输出的pageY值会接近2000。

3.8 MouseEvent.relatedTarget 事件的相关节点

MouseEvent.relatedTarget属性返回事件的相关节点。对于那些没有相关节点的事件，该属性返回null。该属性只读。

下表列出不同事件的target属性值和relatedTarget属性值义。

事件名称	target 属性	relatedTarget 属性
focusin	接受焦点的节点	丧失焦点的节点
focusout	丧失焦点的节点	接受焦点的节点
mouseenter	将要进入的节点	将要离开的节点
mouseleave	将要离开的节点	将要进入的节点
mouseout	将要离开的节点	将要进入的节点
mouseover	将要进入的节点	将要离开的节点
dragenter	将要进入的节点	将要离开的节点
dragexit	将要离开的节点	将要进入的节点

下面是一个例子。

/*
  HTML 代码如下
  <div id="outer" style="height:50px;width:50px;border-width:1px solid black;">
    <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div>
  </div>
*/
var inner = document.getElementById('inner');
inner.addEventListener('mouseover', function (event) {
  console.log('进入' + event.target.id + ' 离开' + event.relatedTarget.id);
}, false);
inner.addEventListener('mouseenter', function (event) {
  console.log('进入' + event.target.id + ' 离开' + event.relatedTarget.id);
});
inner.addEventListener('mouseout', function () {
  console.log('离开' + event.target.id + ' 进入' + event.relatedTarget.id);
});
inner.addEventListener("mouseleave", function (){
  console.log('离开' + event.target.id + ' 进入' + event.relatedTarget.id);
});
// 鼠标从 outer 进入inner，输出
// 进入inner 离开outer
// 进入inner 离开outer
// 鼠标从 inner进入 outer，输出
// 离开inner 进入outer
// 离开inner 进入outer

4、MouseEvent 接口的实例方法

4.1 MouseEvent.getModifierState() 是否按下指定功能键

MouseEvent.getModifierState方法返回一个布尔值，表示有没有按下特定的功能键。它的参数是一个表示功能键的字符串。

document.addEventListener('click', function (e) {
  console.log(e.getModifierState('CapsLock'));
}, false);

上面的代码可以了解用户是否按下了大写键。

5、WheelEvent 接口（滚轮）

5.1 概述

WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。目前，鼠标滚轮相关的事件只有一个wheel事件，用户滚动鼠标的滚轮，就生成这个事件的实例。

浏览器原生提供WheelEvent()构造函数，用来生成WheelEvent实例。

var wheelEvent = new WheelEvent(type, options);

WheelEvent()构造函数可以接受两个参数，第一个是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是wheel。第二个参数是事件的配置对象。该对象的属性除了Event、UIEvent的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。

deltaX：数值，表示滚轮的水平滚动量，默认值是 0.0。
deltaY：数值，表示滚轮的垂直滚动量，默认值是 0.0。
deltaZ：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0。
deltaMode：数值，表示相关的滚动事件的单位，适用于上面三个属性。0表示滚动单位为像素，1表示单位为行，2表示单位为页，默认为0。

5.2 实例属性

WheelEvent事件实例除了具有Event和MouseEvent的实例属性和实例方法，还有一些自己的实例属性，但是没有自己的实例方法。

下面的属性都是只读属性。

WheelEvent.deltaX：数值，表示滚轮的水平滚动量。
WheelEvent.deltaY：数值，表示滚轮的垂直滚动量。
WheelEvent.deltaZ：数值，表示滚轮的 Z 轴滚动量。
WheelEvent.deltaMode：数值，表示上面三个属性的单位，0是像素，1是行，2是页。

五、键盘事件

1、键盘事件的种类

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。

keydown：按下键盘时触发。【按下】
keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。【按下有值的键】
keyup：松开键盘时触发该事件。【松开】

如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。

keydown
keypress
keydown
keypress
…（重复以上过程）
keyup

2、KeyboardEvent 接口概述

KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。

浏览器原生提供KeyboardEvent构造函数，用来新建键盘事件的实例。

new KeyboardEvent(type, options) // 参数一，事件类型；参数二，事件配置对象

KeyboardEvent构造函数接受两个参数。第一个参数是字符串，表示事件类型；第二个参数是一个事件配置对象，该参数可选。除了Event接口提供的属性，还可以配置以下字段，它们都是可选。

key：字符串，当前按下的键，默认为空字符串。【键名】
code：字符串，表示当前按下的键的字符串形式，默认为空字符串。【键码】
location：整数，当前按下的键的位置，默认为0。
ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。
shiftKey：布尔值，是否按下 Shift 键，默认为false。
altKey：布尔值，是否按下 Alt 键，默认为false。
metaKey：布尔值，是否按下 Meta 键，默认为false。
repeat：布尔值，是否重复按键，默认为false。

3、KeyboardEvent 的实例属性

3.1 KeyboardEvent.altKey，KeyboardEvent.ctrlKey，KeyboardEvent.metaKey，KeyboardEvent.shiftKey 【是否按下对应键，布尔值】

以下属性都是只读属性，返回一个布尔值，表示是否按下对应的键。

KeyboardEvent.altKey：是否按下 Alt 键
KeyboardEvent.ctrlKey：是否按下 Ctrl 键
KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）
KeyboardEvent.shiftKey：是否按下 Shift 键

下面是一个示例。

function showChar(e) {
  console.log('ALT: ' + e.altKey);
  console.log('CTRL: ' + e.ctrlKey);
  console.log('Meta: ' + e.metaKey);
  console.log('Shift: ' + e.shiftKey);
}
document.body.addEventListener('keydown', showChar, false);

3.2 KeyboardEvent.code 键码

KeyboardEvent.code属性返回一个字符串，表示当前按下的键的字符串形式。该属性只读。

下面是一些常用键的字符串形式，其他键请查文档。

数字键0 - 9：返回digital0 - digital9
字母键A - z：返回KeyA - KeyZ
功能键F1 - F12：返回 F1 - F12
方向键：返回ArrowDown、ArrowUp、ArrowLeft、ArrowRight
Alt 键：返回AltLeft或AltRight
Shift 键：返回ShiftLeft或ShiftRight
Ctrl 键：返回ControlLeft或ControlRight

3.3 KeyboardEvent.key 键名

KeyboardEvent.key属性返回一个字符串，表示按下的键名。该属性只读。

如果按下的键代表可打印字符，则返回这个字符，比如数字、字母。

如果按下的键代表不可打印的特殊字符，则返回预定义的键值，比如 Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，NumLock，Scroll 等。

如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下 Ctrl + a，则返回a；按下 Shift + a，则返回大写的A。

如果无法识别键名，返回字符串Unidentified。

3.4 KeyboardEvent.location 键处于哪个位置，整数

KeyboardEvent.location属性返回一个整数，表示按下的键处在键盘的哪一个区域。它可能取以下值。

0：处在键盘的主区域，或者无法判断处于哪一个区域。
1：处在键盘的左侧，只适用那些有两个位置的键（比如 Ctrl 和 Shift 键）。
2：处在键盘的右侧，只适用那些有两个位置的键（比如 Ctrl 和 Shift 键）。
3：处在数字小键盘。

3.5 KeyboardEvent.repeat 是否长按

KeyboardEvent.repeat返回一个布尔值，代表该键是否被按着不放，以便判断是否重复这个键，即浏览器会持续触发keydown和keypress事件，直到用户松开手为止。

4、KeyboardEvent 的实例方法

4.1 KeyboardEvent.getModifierState() 是否按下指定功能键

KeyboardEvent.getModifierState()方法返回一个布尔值，表示是否按下或激活指定的功能键。它的常用参数如下。

Alt：Alt 键
CapsLock：大写锁定键
Control：Ctrl 键
Meta：Meta 键
NumLock：数字键盘开关键
Shift：Shift 键

if (
  event.getModifierState('Control') +
  event.getModifierState('Alt') +
  event.getModifierState('Meta') > 1
) {
  return;
}

上面代码表示，只要Control、Alt、Meta里面，同时按下任意两个或两个以上的键就返回。

六、进度事件

1、进度事件的种类

进度事件用来描述资源加载的进度，主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。

abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。【中止加载】
error：由于错误导致外部资源无法加载时触发。【加载错误】
load：外部资源加载成功时触发。【加载成功】
loadstart：外部资源开始加载时触发。【开始加载】
loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。【停止加载】
progress：外部资源加载过程中不断触发。【加载中，不断触发】
timeout：加载超时时触发。【加载超时】

注意，除了资源下载，文件上传也存在这些事件。

下面是一个例子。

image.addEventListener('load', function (event) { // 加载成功
  image.classList.add('finished');
});
image.addEventListener('error', function (event) { // 加载出错
  image.style.display = 'none';
});

上面代码在图片元素加载完成后，为图片元素添加一个finished的 Class。如果加载失败，就把图片元素的样式设置为不显示。

有时候，图片加载会在脚本运行之前就完成，尤其是当脚本放置在网页底部的时候，因此有可能load和error事件的监听函数根本不会执行。所以，比较可靠的方式，是用complete属性先判断一下是否加载完成。

function loaded() {
  // ...
}
if (image.complete) { // 是否加载完成
  loaded();
} else {
  image.addEventListener('load', loaded); // 加载成功事件
}

由于 DOM 的元素节点没有提供是否加载错误的属性，所以error事件的监听函数最好放在<img>元素的 HTML 代码中，这样才能保证发生加载错误时百分之百会执行。

<img src="/wrong/url" onerror="this.style.display='none';" />

loadend事件的监听函数，可以用来取代abort事件、load事件、error事件的监听函数，因为它总是在这些事件之后发生。

req.addEventListener('loadend', loadEnd, false);
function loadEnd(e) {
  console.log('传输结束，成功失败未知');
}

loadend事件本身不提供关于进度结束的原因，但可以用它来做所有加载结束场景都需要做的一些操作。

另外，error事件有一个特殊的性质，就是不会冒泡。所以，子元素的error事件，不会触发父元素的error事件监听函数。

2、ProgressEvent 接口

2.1 概述

ProgressEvent接口主要用来描述外部资源加载的进度，比如 AJAX 加载、<img>、<video>、<style>、<link>等外部资源加载。进度相关的事件都继承了这个接口。这个接口继承了Event接口。

浏览器原生提供了ProgressEvent()构造函数，用来生成事件实例。

new ProgressEvent(type, options) // 参数一，事件类型；参数二，配置对象

ProgressEvent()构造函数接受两个参数。第一个参数是字符串，表示事件的类型，这个参数是必须的。第二个参数是一个配置对象，表示事件的属性，该参数可选。配置对象除了可以使用Event接口的配置属性，还可以使用下面的属性，所有这些属性都是可选的。

lengthComputable：布尔值，表示加载的总量是否可以计算，默认是false。
loaded：整数，表示已经加载的量，默认是0。
total：整数，表示需要加载的总量，默认是0。

2.2 ProgressEvent的实例属性。

ProgressEvent.lengthComputable 总量是否可以计算
ProgressEvent.loaded 已加载的量
ProgressEvent.total 需要加载的总量

如果ProgressEvent.lengthComputable为false，ProgressEvent.total实际上是没有意义的。

下面是一个例子。

var p = new ProgressEvent('load', {
  lengthComputable: true,
  loaded: 30,
  total: 100,
});
document.body.addEventListener('load', function (e) {
  console.log('已经加载：' + (e.loaded / e.total) * 100 + '%');
});
document.body.dispatchEvent(p);
// 已经加载：30%

上面代码先构造一个load事件，抛出后被监听函数捕捉到。

下面是一个实际的例子。

var xhr = new XMLHttpRequest();
xhr.addEventListener('progress', updateProgress, false); // 加载中
xhr.addEventListener('load', transferComplete, false); // 加载成功
xhr.addEventListener('error', transferFailed, false); // 加载错误
xhr.addEventListener('abort', transferCanceled, false); // 中止加载
xhr.open();
function updateProgress(e) { // 加载中
  if (e.lengthComputable) { // 是否可以计算总量
    var percentComplete = e.loaded / e.total; // 加载进度计算
  } else {
    console.log('不能计算进度');
  }
}
function transferComplete(e) { // 加载成功
  console.log('传输结束');
}
function transferFailed(evt) { // 加载错误
  console.log('传输过程中发生错误');
}
function transferCanceled(evt) { // 中止加载
  console.log('用户取消了传输');
}

上面是下载过程的进度事件，还存在上传过程的进度事件。这时所有监听函数都要放在XMLHttpRequest.upload对象上面。

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', updateProgress, false);
xhr.upload.addEventListener('load', transferComplete, false);
xhr.upload.addEventListener('error', transferFailed, false);
xhr.upload.addEventListener('abort', transferCanceled, false);
xhr.open();

七、表单事件

1、表单事件的种类

1.1 input 事件（值发生变化触发，会连续）

input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。

input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

input事件对象继承了InputEvent接口。

该事件跟change事件很像，不同之处在于**input事件在元素的值发生变化后立即发生**，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。

下面是<select>元素的例子。

/* HTML 代码如下
<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
*/
function inputHandler(e) {
  console.log(e.target.value)
}
var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);

上面代码中，改变下拉框选项时，会触发input事件，从而执行回调函数inputHandler。

1.2 select 事件（选中文本时触发）

select事件当在<input>、<textarea>里面选中文本时触发。

// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
  console.log(e.type); // "select" 事件类型
  var _target = e.target;
  console.log(_target.value); // 文本框的全部值
  console.log(_target.selectionDirection); // 选择的方向：'forward'正向、'backward'反向
  console.log(_target.selectionStart); // 开始选择的索引
  console.log(_target.selectionEnd); // 结束选择的索引
  // 注意：开始和结束索引是不分选择方向的，开始的索引一直是靠前的
  console.log(_target.value.slice(_target.selectionStart, _target.selectionEnd)) // 选中的那部分字符串
}, false);

选中的文本可以通过event.target元素的selectionDirection、selectionEnd、selectionStart和value属性拿到。

1.3 change 事件（值发生变化时触发，单次）

change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。具体来说，分成以下几种情况。

激活单选框（radio）或复选框（checkbox）时触发。
用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
当文本框或<textarea>元素的值发生改变，并且丧失焦点时触发。

下面是一个例子。

// HTML 代码如下
// <select size="1" onchange="changeEventHandler(event);">
//   <option>chocolate</option>
//   <option>strawberry</option>
//   <option>vanilla</option>
// </select>
function changeEventHandler(event) {
  console.log(event.target.value);
}

如果比较一下上面input事件的例子，你会发现对于<select>元素来说，input和change事件基本是等价的。

1.4 invalid 事件（表单提交不满足条件触发）

用户提交表单时，如果表单元素的值不满足校验条件，就会触发invalid事件。

<form>
  <input type="text" required oninvalid="console.log('invalid input')" />
  <button type="submit">提交</button>
</form>

上面代码中，输入框是必填的。如果不填，用户点击按钮提交时，就会触发输入框的invalid事件，导致提交被取消。

1.5 reset 事件（重置），submit 事件（提交）

reset事件当表单重置（所有表单成员变回默认值）时触发。

submit事件当表单数据向服务器提交时触发。

注意，这两个事件发生在表单对象<form>上，而不是发生在表单的成员上，因为提交的是表单，而不是表单成员。

<form onreset="console.log('触发了重置事件')" onsubmit="console.log('触发了提交事件')" name="input" action="html_form_action.php" method="get">
    <input type="text" name="lname" value="Duck">

    <button type="reset">重置</button>
    <button type="submit">提交</button>
</form>

2、InputEvent 接口（input事件的实例）

InputEvent接口主要用来描述input事件的实例。该接口继承了Event接口，还定义了一些自己的实例属性和实例方法。

浏览器原生提供InputEvent()构造函数，用来生成实例对象。

new InputEvent(type, options) // 参数一，事件名称；参数二，配置对象

InputEvent构造函数可以接受两个参数。第一个参数是字符串，表示事件名称，该参数是必需的。第二个参数是一个配置对象，用来设置事件实例的属性，该参数是可选的。配置对象的字段除了Event构造函数的配置属性，还可以设置下面的字段，这些字段都是可选的。

inputType：字符串，表示发生变更的类型（详见下文）。
data：字符串，表示插入的字符串。如果没有插入的字符串（比如删除操作），则返回null或空字符串。
dataTransfer：返回一个 DataTransfer 对象实例，该属性通常只在输入框接受富文本输入时有效。

InputEvent的实例属性主要就是上面三个属性，这三个实例属性都是只读的。

（1）InputEvent.data 变动的那部分内容

InputEvent.data属性返回一个字符串，表示变动的内容。

// HTML 代码如下
// <input type="text" id="myInput">
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);
function myFunction(e) {
  console.log(e.data);
}

上面代码中，如果手动在输入框里面输入abc，控制台会先输出a，再在下一行输出b，再在下一行输出c。然后选中abc，一次性将它们删除，控制台会输出null或一个空字符串。

（2）InputEvent.inputType 变更类型

InputEvent.inputType属性返回一个字符串，表示字符串发生变更的类型。

对于常见情况，Chrome 浏览器的返回值如下。完整列表可以参考文档。

手动插入文本：insertText
粘贴插入文本：insertFromPaste
向后删除：deleteContentBackward
向前删除：deleteContentForward

（3）InputEvent.dataTransfer

InputEvent.dataTransfer属性返回一个 DataTransfer 实例。该属性只在文本框接受粘贴内容（insertFromPaste）或拖拽内容（insertFromDrop）时才有效。

八、触摸事件

1、触摸操作概述

浏览器的触摸 API 由三个部分组成。

Touch：一个触摸点的实例
TouchList：多个触摸点集合的实例
TouchEvent：触摸引发的事件实例

Touch接口的实例对象用来表示触摸点（一根手指或者一根触摸笔），包括位置、大小、形状、压力、目标元素等属性。有时，触摸动作由多个触摸点（多根手指）组成，多个触摸点的集合由TouchList接口的实例对象表示。TouchEvent接口的实例对象代表由触摸引发的事件，只有触摸屏才会引发这一类事件。

很多时候，触摸事件和鼠标事件同时触发，即使这个时候并没有用到鼠标。这是为了让那些只定义鼠标事件、没有定义触摸事件的代码，在触摸屏的情况下仍然能用。如果想避免这种情况，可以用event.preventDefault方法阻止发出鼠标事件。

TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …} // TouchEvent接口 ，继承Event接口属性和方法
    altKey: false
    bubbles: true
    cancelBubble: false
    cancelable: false
    changedTouches: TouchList // TouchList 接口 （所有触摸点集合）
            0: Touch // Touch 接口 （单个触摸点）
                clientX: 232
                clientY: 96
                force: 1 // 触摸压力
                identifier: 0 // 唯一ID
                pageX: 232
                pageY: 96
                radiusX: 11.5
                radiusY: 11.5
                region: null
                rotationAngle: 0
                screenX: 476
                screenY: 266
                target: html // 触摸目标元素
                __proto__: Touch
                length: 1
    	__proto__: TouchList
    composed: true
    ctrlKey: false
    currentTarget: null
    defaultPrevented: false
    detail: 0
    eventPhase: 0
    isTrusted: true
    metaKey: false
    path: (3) [html, document, Window]
    returnValue: true
    shiftKey: false
    sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: true}
    srcElement: html
    target: html
    targetTouches: TouchList {0: Touch, length: 1} // TouchList 接口 （所有触摸点集合）
    timeStamp: 994.1749999998137
    touches: TouchList {0: Touch, length: 1} // TouchList 接口 （所有触摸点集合）
    type: "touchmove" // 当前触摸事件类型
    view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    which: 0

2、Touch 接口

2.1 Touch 接口概述（单个触摸点）

Touch 接口代表单个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。

浏览器原生提供Touch构造函数，用来生成Touch实例。

var touch = new Touch(touchOptions);

Touch构造函数接受一个配置对象作为参数，它有以下属性。

identifier：必需，类型为整数，表示触摸点的唯一 ID。
target：必需，类型为元素节点，表示触摸点开始时所在的网页元素。
clientX：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的水平距离，默认为0。
clientY：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的垂直距离，默认为0。
screenX：可选，类型为数值，表示触摸点相对于屏幕左上角的水平距离，默认为0。
screenY：可选，类型为数值，表示触摸点相对于屏幕左上角的垂直距离，默认为0。
pageX：可选，类型为数值，表示触摸点相对于网页左上角的水平位置（即包括页面的滚动距离），默认为0。
pageY：可选，类型为数值，表示触摸点相对于网页左上角的垂直位置（即包括页面的滚动距离），默认为0。
radiusX：可选，类型为数值，表示触摸点周围受到影响的椭圆范围的 X 轴半径，默认为0。
radiusY：可选：类型为数值，表示触摸点周围受到影响的椭圆范围的 Y 轴半径，默认为0。
rotationAngle：可选，类型为数值，表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间，默认值为0。
force：可选，类型为数值，范围在0到1之间，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力，默认为0。

2.2 Touch 接口的实例属性

（1）Touch.identifier 触摸点的ID

Touch.identifier属性返回一个整数，表示触摸点的唯一 ID。这个值在整个触摸过程保持不变，直到触摸事件结束。

someElement.addEventListener('touchmove', function (e) {
  for (var i = 0; i < e.changedTouches.length; i++) {
    console.log(e.changedTouches[i].identifier);
  }
}, false);

（2）Touch.screenX，Touch.screenY，Touch.clientX，Touch.clientY，pageX，pageY （相对屏幕、浏览器、文档的坐标）

Touch.screenX属性和Touch.screenY属性，分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。

Touch.clientX属性和Touch.clientY属性，分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。

Touch.pageX属性和Touch.pageY属性，分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。

（3）Touch.radiusX，Touch.radiusY，Touch.rotationAngle （触摸椭圆区域半径、角度）

Touch.radiusX属性和Touch.radiusY属性，分别返回触摸点周围受到影响的椭圆范围的 X 轴半径和 Y 轴半径，单位为像素。乘以 2 就可以得到触摸范围的宽度和高度。

Touch.rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。

上面这三个属性共同定义了用户与屏幕接触的区域，对于描述手指这一类非精确的触摸，很有帮助。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域。

下面是一个示例。

div.addEventListener('touchstart', rotate);
div.addEventListener('touchmove', rotate);
div.addEventListener('touchend', rotate);
function rotate(e) {
  var touch = e.changedTouches.item(0);
  e.preventDefault();
  src.style.width = touch.radiusX * 2 + 'px';
  src.style.height = touch.radiusY * 2 + 'px';
  src.style.transform = 'rotate(' + touch.rotationAngle + 'deg)';
};

（4）Touch.force 触摸压力

Touch.force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。

（5）Touch.target 开始触摸时的元素

Touch.target属性返回一个元素节点，代表触摸发生时所在的那个元素节点。即使触摸点已经离开了这个节点，该属性依然不变。

3、TouchList 接口

TouchList接口表示一组触摸点的集合。它的实例是一个类似数组的对象，成员是Touch的实例对象，表示所有触摸点。用户用三根手指触摸，产生的TouchList实例就会包含三个成员，每根手指的触摸点对应一个Touch实例对象。

它的实例主要通过触摸事件的TouchEvent.touches、TouchEvent.changedTouches、TouchEvent.targetTouches这几个属性获取。

它的实例属性和实例方法只有两个。

TouchList.length：数值，表示成员数量（即触摸点的数量）。
TouchList.item()：返回指定位置的成员，它的参数是该成员的位置编号（从零开始）。

4、TouchEvent 接口

4.1 概述

TouchEvent 接口继承了 Event 接口，表示由触摸引发的事件实例，通常来自触摸屏或轨迹板。除了被继承的属性以外，它还有一些自己的属性。

浏览器原生提供TouchEvent()构造函数，用来生成触摸事件的实例。

new TouchEvent(type, options)

TouchEvent()构造函数可以接受两个参数，第一个参数是字符串，表示事件类型；第二个参数是事件的配置对象，该参数是可选的，对象的所有属性也是可选的。除了Event接口的配置属性，该接口还有一些自己的配置属性。

touches：TouchList实例，代表所有的当前处于活跃状态的触摸点，默认值是一个空数组[]。
targetTouches：TouchList实例，代表所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点，默认值是一个空数组[]。
changedTouches：TouchList实例，代表本次触摸事件的相关触摸点，默认值是一个空数组[]。
ctrlKey：布尔值，表示 Ctrl 键是否同时按下，默认值为false。
shiftKey：布尔值，表示 Shift 键是否同时按下，默认值为false。
altKey：布尔值，表示 Alt 键是否同时按下，默认值为false。
metaKey：布尔值，表示 Meta 键（或 Windows 键）是否同时按下，默认值为false。

4.2 实例属性

TouchEvent 接口的实例具有Event实例的所有属性和方法，此外还有一些它自己的实例属性，这些属性全部都是只读。

（1）TouchEvent.altKey，TouchEvent.ctrlKey，TouchEvent.shiftKey，TouchEvent.metaKey （是否同时按某些功能键）

TouchEvent.altKey：布尔值，表示触摸时是否按下了 Alt 键。
TouchEvent.ctrlKey：布尔值，表示触摸时是否按下了 Ctrl 键。
TouchEvent.shiftKey：布尔值：表示触摸时是否按下了 Shift 键。
TouchEvent.metaKey：布尔值，表示触摸时是否按下了 Meta 键（或 Windows 键）。

下面是一个示例。

someElement.addEventListener('touchstart', function (e) {
  console.log('altKey = ' + e.altKey);
  console.log('ctrlKey = ' + e.ctrlKey);
  console.log('metaKey = ' + e.metaKey);
  console.log('shiftKey = ' + e.shiftKey);
}, false);

（2）TouchEvent.changedTouches （触摸点集合，不同触摸事件，含义不同）

TouchEvent.changedTouches属性返回一个TouchList实例，成员是一组Touch实例对象，表示本次触摸事件的相关触摸点。

对于不同的事件，该属性的含义有所不同。

touchstart事件：被激活的触摸点
touchmove事件：发生变化的触摸点
touchend事件：消失的触摸点（即不再被触碰的点）

下面是一个示例。

someElement.addEventListener('touchmove', function (e) {
  for (var i = 0; i < e.changedTouches.length; i++) {
    console.log(e.changedTouches[i].identifier);
  }
}, false);

（3）TouchEvent.touches （仍然活动的触摸点集合）

TouchEvent.touches属性返回一个TouchList实例，成员是所有仍然处于活动状态（即触摸中）的触摸点。一般来说，一个手指就是一个触摸点。

下面是一个示例。

someElement.addEventListener('touchstart', function (e) {
  switch (e.touches.length) {
    // 一根手指触摸
    case 1: handle_one_touch(e); break;
    // 两根手指触摸
    case 2: handle_two_touches(e); break;
    // 三根手指触摸
    case 3: handle_three_touches(e); break;
    // 其他情况
    default: console.log('Not supported'); break;
  }
}, false);

（4）TouchEvent.targetTouches （目标元素内活动的触摸点集合）

TouchEvent.targetTouches属性返回一个TouchList实例，成员是触摸事件的目标元素节点内部、所有仍然处于活动状态（即触摸中）的触摸点。

function touches_in_target(ev) {
  return (ev.touches.length === ev.targetTouches.length ? true : false);
}

上面代码用来判断，是否所有触摸点都在目标元素内。

5、触摸事件的种类

触摸引发的事件，有以下几种。可以通过TouchEvent.type属性，查看到底发生的是哪一种事件。

touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点。【开始触摸】
touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件一致的，就是开始触摸时所在的元素节点。它的changedTouches属性返回一个TouchList实例，包含所有不再触摸的触摸点（即Touch实例对象）。【触摸结束】
touchmove：用户移动触摸点时触发，它的target属性与touchstart事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。【触摸移动中】
touchcancel：触摸点取消时触发，比如在触摸区域跳出一个模态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。【触摸点被取消】

下面是一个例子。

var el = document.getElementsByTagName('canvas')[0];
el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);
function handleStart(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    console.log(touches[i].pageX, touches[i].pageY);
  }
}
function handleMove(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    var touch = touches[i];
    console.log(touch.pageX, touch.pageY);
  }
}

九、拖拉事件

1、拖拉事件的种类

拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。

拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。

<div draggable="true">
  此区域可拖拉
</div>

draggable属性可用于任何元素节点，但是图片（<img>）和链接（<a>）不加这个属性，就可以拖拉。对于它们，用到这个属性的时候，往往是将其设为false，防止拖拉这两种元素。

注意，一旦某个元素节点的draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了。

当元素节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。

拖拉的节点上触发：

drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。
dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。

拖拉到别的节点上触发：

dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

下面的例子展示，如何动态改变被拖动节点的背景色。

div.addEventListener('dragstart', function (e) {
  this.style.backgroundColor = 'red';
}, false);
div.addEventListener('dragend', function (e) {
  this.style.backgroundColor = 'green';
}, false);

上面代码中，div节点被拖动时，背景色会变为红色，拖动结束，又变回绿色。

<div class="div1" draggable="true">
    div1，此区域可拖拉
</div>

<div class="div2">
    div2
</div>

<script>
    var div1 = document.querySelector('.div1');
    var div2 = document.querySelector('.div2');
    div1.addEventListener('dragstart', function (e){
        console.log('开始拖拉')
    });
    div1.addEventListener('drag', function (e) {
        console.log('拖拉中') // 持续触发
    });
    div1.addEventListener('dragend', function (e){
        console.log('结束拖拉')
    });
    div2.addEventListener('dragenter', function(){
        console.log('拖到了div2')
    })
    div2.addEventListener('dragover', function(){
        //console.log('正在div2上方') // 持续触发
    })
    div2.addEventListener('dragleave', function(){
        console.log('离开div2')
    })
    div2.addEventListener('drop', function() {
        console.log('在div2上释放')
    })
</script>

下面是一个例子，展示如何实现将一个节点从当前父节点，拖拉到另一个父节点中。

/* HTML 代码如下
 <div class="dropzone">
   <div id="draggable" draggable="true">
     该节点可拖拉
   </div>
 </div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
*/
// 被拖拉节点
var dragged;
document.addEventListener('dragstart', function (event) {
  // 保存被拖拉节点
  dragged = event.target;
  // 被拖拉节点的背景色变透明
  event.target.style.opacity = 0.5;
}, false);
document.addEventListener('dragend', function (event) {
  // 被拖拉节点的背景色恢复正常
  event.target.style.opacity = '';
}, false);
document.addEventListener('dragover', function (event) {
  // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
  event.preventDefault();
}, false);
document.addEventListener('dragenter', function (event) {
  // 目标节点的背景色变紫色
  // 由于该事件会冒泡，所以要过滤节点
  if (event.target.className === 'dropzone') {
    event.target.style.background = 'purple';
  }
}, false);
document.addEventListener('dragleave', function( event ) {
  // 目标节点的背景色恢复原样
  if (event.target.className === 'dropzone') {
    event.target.style.background = '';
  }
}, false);
document.addEventListener('drop', function( event ) {
  // 防止事件默认行为（比如某些元素节点上可以打开链接），
  event.preventDefault();
  if (event.target.className === 'dropzone') {
    // 恢复目标节点背景色
    event.target.style.background = '';
    // 将被拖拉节点插入目标节点
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild( dragged );
  }
}, false);

关于拖拉事件，有以下几个注意点。

拖拉过程只触发以上这些拖拉事件，尽管鼠标在移动，但是鼠标事件不会触发。
将文件从操作系统拖拉进浏览器，不会触发dragstart和dragend事件。
dragenter和dragover事件的监听函数，用来取出拖拉的数据（即允许放下被拖拉的元素）。由于网页的大部分区域不适合作为放下拖拉元素的目标节点，所以这两个事件的默认设置为当前节点不允许接受被拖拉的元素。如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

上面代码中，如果不取消拖拉事件或者阻止默认行为，就不能在div节点上放下被拖拉的节点。

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

JavaScript-事件（二）

3.5 MouseEvent.screenX 相对屏幕X坐标，MouseEvent.screenY 相对屏幕Y坐标

3.6 MouseEvent.offsetX 偏移量X，MouseEvent.offsetY 偏移量Y

3.7 MouseEvent.pageX 文档X坐标，MouseEvent.pageY 文档Y坐标

3.8 MouseEvent.relatedTarget 事件的相关节点

4、MouseEvent 接口的实例方法

4.1 MouseEvent.getModifierState() 是否按下指定功能键

5、WheelEvent 接口 （滚轮）

5.1 概述

5.2 实例属性

五、键盘事件

1、键盘事件的种类

2、KeyboardEvent 接口概述

3、KeyboardEvent 的实例属性

3.1 KeyboardEvent.altKey，KeyboardEvent.ctrlKey，KeyboardEvent.metaKey，KeyboardEvent.shiftKey 【是否按下对应键，布尔值】

3.2 KeyboardEvent.code 键码

3.3 KeyboardEvent.key 键名

3.4 KeyboardEvent.location 键处于哪个位置，整数

3.5 KeyboardEvent.repeat 是否长按

4、KeyboardEvent 的实例方法

4.1 KeyboardEvent.getModifierState() 是否按下指定功能键

六、进度事件

1、进度事件的种类

2、ProgressEvent 接口

2.1 概述

2.2 ProgressEvent的实例属性。

七、表单事件

1、表单事件的种类

1.1 input 事件 （值发生变化触发，会连续）

1.2 select 事件 （选中文本时触发）

1.3 change 事件 （值发生变化时触发，单次）

1.4 invalid 事件 （表单提交不满足条件触发）

1.5 reset 事件（重置），submit 事件（提交）

2、InputEvent 接口（input事件的实例）

（1）InputEvent.data 变动的那部分内容

（2）InputEvent.inputType 变更类型

（3）InputEvent.dataTransfer

八、触摸事件

1、触摸操作概述

2、Touch 接口

2.1 Touch 接口概述 （单个触摸点）

2.2 Touch 接口的实例属性

（1）Touch.identifier 触摸点的ID

（2）Touch.screenX，Touch.screenY，Touch.clientX，Touch.clientY，pageX，pageY （相对屏幕、浏览器、文档的坐标）

（3）Touch.radiusX，Touch.radiusY，Touch.rotationAngle （触摸椭圆区域半径、角度）

（4）Touch.force 触摸压力

（5）Touch.target 开始触摸时的元素

3、TouchList 接口

4、TouchEvent 接口

4.1 概述

4.2 实例属性

（1）TouchEvent.altKey，TouchEvent.ctrlKey，TouchEvent.shiftKey，TouchEvent.metaKey （是否同时按某些功能键）

（2）TouchEvent.changedTouches （触摸点集合，不同触摸事件，含义不同）

（3）TouchEvent.touches （仍然活动的触摸点集合）

（4）TouchEvent.targetTouches （目标元素内活动的触摸点集合）

5、触摸事件的种类

九、拖拉事件

1、拖拉事件的种类

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

5、WheelEvent 接口（滚轮）

1.1 input 事件（值发生变化触发，会连续）

1.2 select 事件（选中文本时触发）

1.3 change 事件（值发生变化时触发，单次）

1.4 invalid 事件（表单提交不满足条件触发）

2.1 Touch 接口概述（单个触摸点）