js高级程序设计-事件和异常处理

1.拖动元素的事件过程

拖动事件大致可以分为7个事件：dragstart、drag、dragend、dragenter、dragover、dragleave、drop

这7个事件可以分为两类：使用在拖动元素上、使用在拖动的目标元素上

触发元素	事件
被拖动的元素	dragStart:拖动开始触发，接着就是在拖动过程中触发drag事件，最后是当被拖动元素停止时触发（不管目标元素有效还是无效都会触发）
放置目标的元素	当鼠标拖动元素进入放置目标的元素时就会触发dragenter事件，接着当拖动元素完全进入目标元素的范围内会触发dragover事件，当拖动元素离开放置元素时会触发dragleave事件，最后在鼠标放置拖动元素时会触发drop事件

2.自定义拖放目标元素

在网页上进行拖放，当将拖放元素拖放到无效的目标元素时，一般会有一个小圆圈加上一条横杠，代表无效。这里其实可以修改的，即将无效的放置目标元素修改为有效的放置目标元素，这里只需修改3个原生事件即可。

// 加入有一个目标元素的id为dropTarget，我们现在就拿这个id的时间做文章
const dropEle = document.querySelector("#dropTarget");
dropEle.ondragenter = function(e) {
  e.preventDefault();
}
dropEle.ondragover = function(e) {
  e.preventDefault();
}
dropEle.ondrop = function(e) {
  e.preventDefault();
}

以上3个事件就可以将无效的放置元素修改为有效的元素了。

3.拖动元素的新增属性

在H5中新增了一个元素的属性draggable，这个属性可以让所有元素进行拖动，只需将该属性的值设置为false即可。可以拖动的元素无非就有三种，文本、图像和链接，其中图像和链接是可以直接拖动的，即draggable的默认值是true，文本的默认值是false。

// 将文本设置为可以拖动
<div draggable="true">文本拖动</div>

视频在加载期间显示一幅图像，可以通过poster属性指定一个图像的uri即可，因为不同的浏览器支持的格式不一样，可以使用canPlayType()方法进行浏览器播放资源格式的检测

<video src="b.mp3" poster="a.jpg">加载期间显示一副海报</video>

4.错误处理

在代码中经常可以看到js的错误处理，一般都是使用try-catch语句进行处理，这和java中的错误处理机制是一致的，try中试可能出错的代码，catch中会通过一个错误对象，描述错误信息。

try {
  ...
  noFunction();
  ...
} catch(error) {
  // 使用error对象，里面最常用的属性就是message和name属性，进行错误处理
  console.log(error.message);
}

此外还见过finally子句跟在catch子句后面,它的作用和catch差不多，但是只要写了它，无论try和catch中的代码时什么，finally子句中的代码都会执行，即使代码里有return子句，它也会把return语句忽略。书上说可以将cach和finally两个子句保留一个即可。

try {
  return 2;
} catch(error) {
  return 1;
} finally {
  return 0;
}

对于上面的代码，只要执行就会返回0，因为finally任性，但是现在见到的使用场景非常少，try-catch语句足够用。

在代码很多时，定位错误会很费力，这里还可以使用throw语句跑出错误，这里通过创建Error的实例，可以自定义错误的原因，这样定位起来会容易一些。

if (!(values instanceof Array)) {
  throw new Error("values 不是数组");
}