解析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.. }

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注意事项：

obj.attachEvent(event,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原理用法的区别的详细内容，更多内容请关注技术你好其它相关文章！