element["on" + type] = handleEvent;

if ( elem.addEventListener ) {

　　elem.addEventListener( type, eventHandle, false );

} else if ( elem.attachEvent ) {

　　elem.attachEvent( "on" + type, eventHandle );

}

<style>
#myDIV {
margin:25px;
width:550px;
height:100px;
background:orange;
position:relative;
font-size:20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>

<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>

<div id="myDIV" >点我开始动画</div>

<script>

var x = document.getElementById("myDIV")

//存在onclick属性

x.onclick = myFunction;

// 使用 JavaScript 开始动画

function myFunction() {

    //x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码

    x.style.animation = "mymove 4s 2";

}

//  Chrome, Safari 和 Opera

//x.addEventListener("webkitAnimationStart", myStartFunction);

//x.addEventListener("webkitAnimationIteration", myIterationFunction);

//x.addEventListener("webkitAnimationEnd", myEndFunction);

x.addEventListener("animationstart", myStartFunction);

x.addEventListener("animationiteration", myIterationFunction);

x.addEventListener("animationend", myEndFunction);

function myStartFunction() {

    this.innerHTML = "animationstart 事件触发 - 动画已经开始";

    this.style.backgroundColor = "pink";

}

function myIterationFunction() {

    this.innerHTML = "animationiteration 事件触发 - 动画重新播放";

    this.style.backgroundColor = "lightblue";

}

function myEndFunction() {

    this.innerHTML = "animationend 事件触发 - 动画已经完成";

    this.style.backgroundColor = "lightgray";

}

</script>

x.onanimationstart = myStartFunction;

x.onanimationiteration = myIterationFunction;

x.onanimationend = myEndFunction;