Useful Dom Events

onBeforeUnload.js

// 在用户将跳出当前页面时弹出确认框，确认框的文字会是"Please don't leave"

window.onbeforeunload = function(e) {
  return "Please don't leave";
};

transitionEnd.js

// 侦听元素在完成css的transition动画的结束
/*
   如果你使用的是 @keyframe 动画, 需要使用 ‘animationEnd’ 事件, 而不是 ‘transitionEnd’。
   像大多数事件一样, transitionEnd 是冒泡的. 记得使用 event.stopPropagation() 或者确认 event.target 来避免不正确的对象响应.
*/


var div = document.querySelector('div');

// Lazily add transitionEnd listeners for multiple vendors
div.addEventListener('webkitTransitionEnd', onTransitionEnd);
div.addEventListener('mozTransitionEnd', onTransitionEnd);
div.addEventListener('msTransitionEnd', onTransitionEnd);
div.addEventListener('transitionEnd', onTransitionEnd);

function onTransitionEnd() {
  alert('Transition end');
}

div.addEventListener('click', function() {
  div.classList.toggle('bottom');
});