小编这次要给大家分享的是详解Js中on和addEventListener，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

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

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 world
hello 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（失去焦点）

看完这篇关于详解Js中on和addEventListener的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。