自定义事件遇到的坑

1. JS触发原生事件

var ev = new Event("touchstart", {"bubbles":true, "cancelable":true});
document.addEventListener('touchstart',function(e){
  console.log(e);
 })
document.dispatchEvent(ev);

通过这种方法可以用JS触发原生事件

2. 创建的Event对象最好不要重用

昨天在写一个功能的时候用到了事件代理。简单点说就是一个大的DIV套了三个小的DIV，触发小DIV的touchstart事件由大的DIV来捕获处理。
一开始我是这么写的

var divs = document.querySelectorAll('.smallDiv'),
event = new Event('touchstart', {bubbles: true,cancelable: true});
for (i = 0; i < divs.length; i++) {
      divs[i].dispatchEvent(event);
}

我是想event创建一次就可以了，不用重复创建。但是遇到个问题，大DIV上只捕获到了一次，后面两次都没捕获到。找了半天才发现是大DIV上捕获的方法里有一句event.stopPropagation();因为处理的是同一个event。所以我估计这句话改变了event里某个属性。但是我查看了event里所有对象后发现并没有改变，打印stopPropagation方法出来的是native code，看来不是js能搞定的了，暂且估计是浏览器自己的实现吧。
知道了问题所在，我把代码改成一下就OK了

var divs = document.querySelectorAll('.smallDiv'),
event ;
for (i = 0; i < divs.length; i++) {
       event = new Event('touchstart', {bubbles: true,cancelable: true});
      divs[i].dispatchEvent(event);
}