DOM 事件类型

DOM 加载事件 ？！    —  （节点）变动事件 ？！   —    剪贴板事件 ？！

提到加载事件，可能会想到 window.onload，实际上，DOM 加载事件是一大类事件，主要包括以下形式：

[1] onload 事件

load 事件是最常用的一个事件，当页面完全加载后，就会触发 window 上的 load 事件。

<script type="text/javascript">
    window.onload = function(){
	console.log('页面加载完成');
    }
</script>

onload 事件，不仅发生在 wondow 对象上，还可能发生在各种外部资源上。简单来说，网页渲染是一个不断加载各种资源的过程，图像、样式表、脚本、音视频等资源以及 window、document 和 XHR 对象，都会触发 onload 事件。

<script type="text/javascript">
	var img = new Image();
	img.onload = function(){
		document.body.appendChild(img);
	}
	img.src = 'http://www.webpiece.cn/wp-content/uploads/2019/11/project.png';
</script>

不过，页面如果是从浏览器缓存中加载的话，并不会触发该事件。

[2] error 事件

load 事件是加载成功时触发，而 error 事件与之相反，在加载失败的时候触发。可触发的元素与 load 事件相同。

任何没有通过 try - catch 处理的错误都会触发 window.onload 事件。

# 要指定 onerror 事件处理程序，可以使用 DOM0 级技术，也可以使用 DOM2 级事件的标准格式

error 事件可以接受 3 个参数：错误消息、错误消息所在的 URL 和行号。多数情况下，只有错误消息有用，因为 URL 只是给出了文档的位置，而行号所指的代码行即可能出自嵌入的 JS 代码，也可能来自于外部文件。

// DOM0级
window.onerror = function(message,url,line){
    alert(message);
}
// DOM2级
window.addEventListener("error",function(message,url,line){
    alert(message);
});

# 发生 error 事件时，图片下载已经结束了，但是，可以在 error 事件中重置 src 属性，指向备用的图像地址

<script type="text/javascript">
	var img = new Image();
	document.body.appendChild(img);
	img.onerror = function(){
		img.src = 'http://www.webpiece.cn/wp-content/uploads/default.png'
	}
	img.src = 'http://www.webpiece.cn/wp-content/uploads/2019/11/project.png';
</script>

UIEvent

[ scroll 事件 ] scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

$(selector).scroll(function(){
   // 可选，规定当发生 scroll 事件时运行的函数
})

鼠标事件 ？！

# 与mouseover和mouseout不同，mouseenter和mouseleave只关注元素本身，子元素之间的移动不会触发。

属性：
	clientX,clientY		// 鼠标到页面的左边、上边
	screenX,screenY		// 鼠标到屏幕的左边、上边
	ctrlkey,shiftKey,altKey,metaKey	// 按下ctrl、shift、alt、meta，值为true
	button(0,1,2)	// 按下左边、中间、右边的键

顺序：
1. 从元素上方移过
	mousemove - mouseover(A) - mouseenter(A) - mousemove(A) - mouseout(A) - mouseleave(A)
2. 点击元素
	mousedown - [mousemove] - mouseup -click

// 实例：拖拽元素

<div id="div0"></div>
<style media="screen">
  #div0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
</style>

var elem = document.getElemenyById('div0');
var clientX, clientY, isMoving;
var mouseDownHandler = function(event) {
  event = event || window.event;
  clientX = event.clientX;
  clientY = event.clientY;
  isMoving = true;
}

var mouseMoveHandler = function(event) {
  if (!isMoving) return;
  event = event || window.event;
  var newClientX = event.clientX,
      newClientY = event.clientY;
  var left = parseInt(elem.style.left) || 0,
      top = parseInt(elem.style.top) || 0;
  elem.style.left = left + (newClientX - clientX) + 'px';
  elem.style.top = top + (newClientY - clientY) + 'px';
  clientX = newClientX;
  clientY = newClientY;
}

var mouseUpHandler = function() {
  isMoving = false;
}

addEvent(elem, 'mousedown', mouseDownHandler);
addEvent(elem, 'mouseup', mouseUpHandler);
addEvent(elem, 'mousemove', mouseMoveHandler);

滚轮事件 ？！

属性：
	deltaMode	// 用于指定delta值的单位
	deltaX	// 鼠标滚轮在X轴上产生的偏移量
	deltaY	// 鼠标滚轮在Y轴上产生的偏移量
	deltaZ	// 鼠标滚轮在Z轴上产生的偏移量

键盘事件 ？！    —    文本事件 ？！   —   焦点事件 ？！