JavaScript 复习之各类事件（二）-CSDN博客

本文深入探讨HTML表单事件，如input、change、invalid、reset及submit事件，讲解InputEvent接口及其属性。同时，详细解析触摸事件的原理，包括Touch、TouchList和TouchEvent接口，以及touchstart、touchend、touchmove等事件。此外，还介绍了拖拉事件和剪切板事件的处理。

摘要由CSDN通过智能技术生成

表单事件

一、事件种类

input事件

当<input>、<select>、<textarea>的值发生变化时触发。

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

select事件

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

change事件

当<input>、<select>、<textarea>的值发生变化时触发。

invalid事件

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

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

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

reset 事件 submit 事件

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

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮。

二、 InputEvent 接口

InputEvent.data返回一个字符串，表示变动的内容。
InputEvent.inoutType返回一个字符串，表示字符串发生变更的类型
InputEvent.dataTransfer返回一个 DataTransfer 实例。该属性只在文本框接受粘贴内容（insertFromPaste）或拖拽内容（insertFromDrop）时才有效。

触摸事件

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

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

Touch 接口

实例属性

Touch.identifier返回一个整数，表示触摸点的位移ID。这个值在整个触摸过程保持不变，直到触摸事件结束。
Touch.screenX属性和Touch.screenY属性，分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。
Touch.clientX属性和Touch.clientY属性，分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。
Touch.pageX属性和Touch.pageY属性，分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。
Touch.radiusX属性和Touch.radiusY属性，分别返回触摸点周围受到影响的椭圆范围的 X 轴半径和 Y 轴半径，单位为像素。乘以 2 就可以得到触摸范围的宽度和高度。
Touch.rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。
Touch.force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。
Touch.target返回一个元素节点，代表触摸发生时所在的那个元素节点。

TouchList接口

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

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

触摸事件种类

touchstart：用户开始触摸时触发
tauchend：用户不再接触触摸屏时触发
touchmove：用户移动触摸点时触发
touchcancel：触摸点取消时触发，比如在触摸区域跳出一个模态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。

拖拉事件

一、事件种类

drag：拖拉过程中，在被拖拉的节点上持续触发
dragStart：开始拖拉时，在被拖拉的节点上触发
dragend：拖拉结束时触发
dragenter：拖拉进入当前节点时，在当前节点上触发一次。
dragover：脱拉到当前节点上方时，在当前节点上持续触发
dragleave：拖拉操作离开当前节点范围时，在当前节点上触发
drop：被拖拉的节点或被选中的文本，释放到目标节点时，在目标节点上触发

/* 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事件的监听函数，用来取出拖拉数据。由于网页的大部分区域不适合作为放下拖拉元素的目标几点，所以这两个事件的默认设置为当前节点不允许接受被拖拉的元素，如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。

二、DataTransfer 接口

所有的拖拉事件的实例都一个DragEvent.dataTransfer属性，用来读写需要传递的数据

三、DataTransfer的实例属性

DataTransfer.dropEffect

用来设置放下（drop）被拖动节点时的效果，会影响到拖拉经过相关区域时鼠标的形状。可取下面的值：

copy：复制被拖动的节点
move：移动被拖拉的节点
link：创建指向被拖拉的节点的链接
none：无法放下被拖拉的节点

dropEffect属性一般在dragenter和dragover事件的监听函数中设置，对于dragstart、drag、dragleave这三个事件，该属性不起作用。

DataTransfer.effectAllowed

属性设置本次拖拉中允许的效果，可能的取值：

copy：复制被拖拉的节点
move：移动被拖拉的节点
link：创建指向被拖拉节点的链接
copyLink：允许copy或link
copyMove：允许copy或move
linkMove：允许link或move
all：允许所有效果
none：无法放下被拖拉的节点
uninitialized：默认值，等同于all

如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。

dragstart事件的监听函数，可以用来设置这个属性。其他事件的监听函数里面设置这个属性是无效的。

DataTransfer.files

属性是一个 FileList 对象，包含一组本地文件，可以用来在拖拉操作中传送。如果本次拖拉不涉及文件，则该属性为空的 FileList 对象。

// HTML 代码如下
// <div id="output" style="min-height: 200px;border: 1px solid black;">
//   文件拖拉到这里
// </div>

var div = document.getElementById('output');

div.addEventListener("dragenter", function( event ) {
  div.textContent = '';
  event.stopPropagation();
  event.preventDefault();
}, false);

div.addEventListener("dragover", function( event ) {
  event.stopPropagation();
  event.preventDefault();
}, false);

div.addEventListener("drop", function( event ) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    div.textContent += files[i].name + ' ' + files[i].size + '字节\n';
  }
}, false);
复制代码

上面代码中，通过dataTransfer.files属性读取被拖拉的文件的信息。如果想要读取文件内容，就要使用FileReader对象。

div.addEventListener('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var fileList = e.dataTransfer.files;
  if (fileList.length > 0) {
    var file = fileList[0];
    var reader = new FileReader();
    reader.onloadend = function(e) {
      if (e.target.readyState === FileReader.DONE) {
        var content = reader.result;
        div.innerHTML = 'File: ' + file.name + '\n\n' + content;
      }
    }
    reader.readAsBinaryString(file);
  }
});
复制代码

DataTransfer.types

属性是一个只读的数组，每个成员是一个字符串，里面是拖拉的数据格式（通常是 MIME 值）。比如，如果拖拉的是文字，对应的成员就是text/plain。

四、DataTransfer 的实例方法

一、资源事件

DataTransfer.setData()方法用来设置拖拉事件所带有的数据。该方法没有返回值。
DataTransfer.getData()方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据（通常是用setData方法添加的数据）。
DataTransfer.clearData()方法接受一个字符串（表示数据类型）作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则调用该方法不会产生任何效果。
DataTransfer.setDragImage()方法可以自定义跟随鼠标一起移动的图片。它接受三个参数。第一个是节点或者节点，如果省略或为null，则使用被拖动的节点的外观；第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

其他事件

beforeunload事件

在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。

unload 事件

在窗口关闭或者document对象将要卸载时触发。它的触发顺序排在beforeunload、pagehide事件后面。

load 事件，error 事件

load事件在页面或某个资源加载成功时触发。error事件是在页面或资源加载失败时触发。abort事件在用户取消加载时触发。

二、session历史事件

pageshow 事件，pagehide 事件

默认情况下，浏览器会在当前会话（session）缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。

pageshow 事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载（不管是不是从浏览器缓存）时都运行的代码，可以放在这个事件的监听函数。 pageshow 事件有一个persisted属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。

pagehide事件与pageshow事件类似，当用户通过“前进/后退”按钮，离开当前页面时触发。它与 unload 事件的区别在于，如果在 window 对象上定义unload事件的监听函数之后，页面不会保存在缓存中，而使用pagehide事件，页面会保存在缓存中。pagehide事件实例也有一个persisted属性，将这个属性设为true，就表示页面要保存在缓存中；设为false，表示网页不保存在缓存中，这时如果设置了unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。

popstate 事件

popstate事件在浏览器的history对象的当前记录发生显式切换时触发。注意，调用history.pushState()或history.replaceState()，并不会触发popstate事件。该事件只在用户在history记录之间显式切换时触发，比如鼠标点击“后退/前进”按钮，或者在脚本中调用history.back()、history.forward()、history.go()时触发。

hashchange 事件

事件在 URL 的 hash 部分（即#号后面的部分，包括#号）发生变化时触发。该事件一般在window对象上监听。

hashchange的事件实例具有两个特有属性：oldURL属性和newURL属性，分别表示变化前后的完整 URL。

三、网页状态事件

DOMContentLoaded事件

网页下载并解析完成以后，浏览器就会在document对象上触发 DOMContentLoaded 事件。

readystatechange事件

当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发。document.readyState有三个可能的值：loading（网页正在加载）、interactive（网页已经解析完成，但是外部资源仍然处在加载状态）和complete（网页和所有外部资源已经结束加载，load事件即将触发）。