一.首先介绍两者的用法：

1.on的用法：以onclick为例

第一种：

obj.onclick = function(){

    //内容

}

第二种：

obj.onclick= fn;

function fn (){

    //内容

}

第三种：当函数fn有参数的情况下使用匿名函数来传参：

obj.onclick = function(){fn(param)};

function fn(param){

    //内容

}

2.addEventListener的用法：

形式：addEventListener(event,funtionName,useCapture)

参数：

    event:事件的类型如 “click”

    funtionName：方法名

    useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。

            true - 事件句柄在捕获阶段执行

            false- false- 默认。事件句柄在冒泡阶段执行

写法：

第一种：

obj.addEventListener("click",function(){

//do something

}));

第二种，没参数可以直接写函数名

obj.addEventListener("click",fn,fasle));

function fn(){

//do something..

}

第三种：函数有参数时需要使用匿名函数来传递参数

obj.addEventListener("click",function(){fn(parm)},false);

二.两者的区别

1.on事件会被后面的on的事件覆盖

以onclick为例：

//obj是一个dom对象，下同

//注册第一个点击事件

obj.onclick(function(){

    alert("啦啦");

});

//注册第二个点击事件

obj.onclick(function(){

    alert("啦啦");

});

最终会只有弹框输出：

啦啦

2.addEventListener 则不会覆盖。

//注册第一个点击事件

obj.addEventListener("click",function(){

    alert("啦啦");

}));

//注册第二个点击事件

obj.addEventListener("click",function(){

    alert("啾啾");

}));

这样会连续输出：

啦啦

啾啾

三.addEventListener注意事项：

1.特别说明addEventListener不被IE9以下兼容，IE9以下用使用addEvent()

obj.addEvent( event , funtionName );

参数：

event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）

funtionName:方法名（要参数是也是需要使用匿名函数来传参）