var oBtn=document.getElementById('anniu');

var myevent= new Event('mydiy');

oBtn.addEventListener('mydiy',function(){

console.log('console text');

})

var myevent3 = document.createEvent("CustomEvent");

myevent3.initCustomEvent("mydiy3", true, true, {a:1, b:2});  // ( 要处理的事件名, 事件是否冒泡, 是否取消事件的默认行为, 细节参数 )

oBtn.addEventListener("mydiy3", function(e){

   var obj = e.detail;

   console.log(obj.a + "  " + obj.b);  // 1  2

});

oBtn.onclick=function(){

oBtn.dispatchEvent(myevent);

oBtn.dispatchEvent(myevent3);

}

我自己写了个练习，不知道是不是合理

<section>

<article>

<style type="text/css">

#keyboard{padding: 30px;background: pink;}

#keyboard span{display: inline-block;padding:10px 20px 30px;background: white;}

#keyboard span.current{background: gray;}

</style>

<div id="keyboard">

<span> A </span>

<span> S </span>

<span> D </span>

<span> F </span>

<span> G </span>

<span> H </span>

<span> J </span>

<span> K </span>

<span> L </span>

</div>

<script type="text/javascript">

var  okeyboard= document.getElementById('keyboard');

var aspan=okeyboard.getElementsByTagName('span');

var keydownEvent= new Event('mykeydown');

  for(var i=0;i<aspan.length;i++){

  aspan[i].addEventListener('mykeydown',function(){

  for(var n=0;n<aspan.length;n++){

aspan[n].removeAttribute('class');

  }

this.setAttribute('class','current');

}) 

  }

  //无限循环

var i=0;

var timer= setInterval(function(){

aspan[i].dispatchEvent(keydownEvent);

if(i<aspan.length-1){

i++;

}

else{

i=0;

}

console.log('timeout:'+i);

},1000)  

  // 循环一遍 var i=0

// var timer= setInterval(function(){

// if(i<aspan.length){

// aspan[i].dispatchEvent(keydownEvent);

// console.log('timeout:'+i);

// i++;

// }

// else{

// clearInterval(timer);

// }

// },1000) 

</script>

</article>

</section>