不常用事件记录

online

当浏览器能够访问网络, 并且navigator.online的值被设为true时, online事件被触发

navigator.onLine
// false

offline

检测当前网络失去时启动

// addEventListener version
window.addEventListener('offline', (event) => {
    console.log("The network connection has been lost.");
});

// onoffline version
window.onoffline = (event) => {
  console.log("The network connection has been lost.");
};

unload

发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)

window.addEventListener('unload', function(event) {
  //
});

beforeunload

在即将离开当前页面（刷新或关闭）时触发

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  // Chrome的需要设置的returnValue
  event.returnValue = '';
});

pagehide

用户离开页面时执行

window.addEventListener("pagehide", event => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
}, false);

window.onpagehide = event => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
}

pageshow

用户进入页面，加载过程中发送此事件，会在发生之后发送load

const events = [
  "pagehide", "pageshow",
  "unload", "load"
];

const eventLogger = (event) => {
  switch(event.type) {
    case "pagehide":
    case "pageshow":
      let isPersisted = event.persisted ? "persisted" : "not persisted";
      console.log(`Event: ${event.type} - ${isPersisted}`);
      break;
    case "load":
    case "unload":
      console.log(`Event: ${event.type}`);
      break;
    default:
      console.log(`Event: ${event.type}`);
      break;
  }
};

events.forEach(eventName => {
  window.addEventListener(eventName, eventLogger, false);
});

// "Event: load"
// "Event: pageshow - not persisted"

animationstart

css动画启动时触发该事件

const animated = document.querySelector('.animated');

animated.addEventListener('animationstart', () => {
  console.log('Animation started');
});

animationend

css动画完成时触发该事件

animationiteration

CSS动画迭代结束，再开始时触发，此事件不会与animationend事件同时发生，因此对于具有1 animation-iteration-count的动画不会发生。

transitionend

CSS动画过渡后执行

submit

form表单提交

reset

form表单重置

form.addEventListener('reset');

fullscreenchange

浏览器切换到全屏或者退出全屏之前，触发该事件

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    console.log('进入全屏模式');
  } else {
    console.log('离开全屏');
  }
});

resize

获取当前窗口被调整大小时触发

window.onresize = ()=>{
	console.log(`屏幕的宽：${ window.innerWidth } ； 屏幕的高：${ window.innerHeight }`)
}

cut

通过浏览器界面启动剪切操作时，将触发该事件

要覆盖默认行为（例如，插入一些不同的数据或剪贴板内容的转换），事件处理程序必须使用取消默认操作event.preventDefault()，然后手动插入其所需的数据。

<div class="source" contenteditable="true">Try cutting text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>

const source = document.querySelector('div.source');

source.addEventListener('cut', (event) => {
	// 执行剪切
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    selection.deleteFromDocument();
    event.preventDefault();
});

copy

通过浏览器启动复制操作

代码同cut

paste

通过浏览器 粘贴 操作时，触发此方法

代码同cut

dbclick

双击按钮，两次触发click事件

const card = document.querySelector('aside');

card.addEventListener('dblclick', function (e) {
	// 双击切换样式
  card.classList.toggle('large');
});

select

选中文本时触发该事件

<input value="Try selecting some text in this element.">
<p id="log"></p>

function logSelection(event) {
  const log = document.getElementById('log');
  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
  log.textContent = `You selected: ${selection}`;
}

const input = document.querySelector('input');
input.addEventListener('select', logSelection);

拖动事件

dragstart

用户开始拖动HTML元素或选中的文本

drag

正在拖动元素或文本选区（在此过程中持续触发，每350ms触发一次）

dragend

拖放操作结束 （松开鼠标按钮或按下Esc键）

dragenter

被拖动的元素或文本选区移入有效释放目标区

dragover

被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）

dragleave

被拖动的元素或文本选区移出有效释放目标区

drop

元素在有效释放目标区上释放

<div class="dropzone"> 
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> 
    This div is draggable 
  </div> 
</div> 
<div class="dropzone"></div>
<div class="dropzone"></div> 
<div class="dropzone"></div>

var dragged;

/* events fired on the draggable target */
document.addEventListener("drag", function(event) {

}, false);

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = .5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

}, false);

document.addEventListener("drop", function(event) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
    dragged.parentNode.removeChild( dragged );
    event.target.appendChild( dragged );
  }
}, false);

事件汇总清单-菜鸟教程

事件参考 | MDN