一.首先介绍两者的用法：
1.on的用法：以onclick为例
第一种：
obj.onclick = function(){//do something..}
第二种：
obj.onclick= fn;function fn (){//do something...}
第三种：当函数fn有参数的情况下使用匿名函数来传参：
obj.onclick = function(){fn(param)};function fn(param){//do something..}
不能够这样写:错误写法：obj.onclick= 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("hello world");});//注册第二个点击事件obj.onclick(function(){alert("hello world too");});
最终会只有弹框输出：
hello world too
2.addeventlistener 则不会覆盖。
//注册第一个点击事件obj.addeventlistener("click",function(){alert("hello world");}));//注册第二个点击事件obj.addeventlistener("click",function(){alert("hello world too");}));
这样会连续输出：
hello worldhello world too
三.addeventlistener注意事项：
1.特别说明addeventlistener不被ie9以下兼容，ie9以下用使用attachevent()
obj.attachevent(event,funtionname);
参数：
event:事件类型（需要写成“onclick”前面加on，这个与addeventlistener不同）
funtionname:方法名（要参数是也是需要使用匿名函数来传参）
四.事件集合：
1.鼠标事件：
click(单击)dbclick(双击)mousedown(鼠标按下)mouseout(鼠标移走)mouseover(鼠标移入)mouseup(鼠标弹起)mousemove(鼠标移动)2.键盘事件：
keydown(键按下)keypress(按键)keyup(键起来)3.html事件：load（加载页面）unload（卸载离开页面）change（改变内容）scroll（滚动）focus（获得焦点）blur（失去焦点）五.总结：
onxxx与addeventlistener都是为dom元素添加事件监听，使其在事件发生后执行相应的代码，操作。有了它们我们实现了页面与用户交互。
相关学习推荐：javascript视频教程
以上就是解析js on及addeventlistener原理用法的区别的详细内容。