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(失去焦点)

五.总结:

onXXX与addEventListener都是为dom元素添加事件监听,使其在事件发生后执行相应的代码,操作。有了它们我们实现了页面与用户交互。

以上是 Js on及addEventListener原理用法区别解析 的全部内容, 来源链接: utcz.com/z/323171.html

回到顶部