JavsScript--on与addEventListener的使用与两者的不同

Js之on和addEventListener的使用与不同

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

1.on的用法：以onclick为例

第一种：

obj.onclick = function(){
//do something..
}

第二种：

obj.οnclick= fn;
function fn (){
//do something...
}

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

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

不能够这样写:错误写法：obj.οnclick= 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元素添加事件监听，使其在事件发生后执行相应的代码，操作。有了它们我们实现了页面与用户交互。

作者：Ry-yuan

本文是个人总结得出。

转载请标明出处，本文地址：http://www.cnblogs.com/Ry-yuan/p/6865632.html

转载于:https://www.cnblogs.com/Ry-yuan/p/6865632.html

JavsScript--on与addEventListener的使用与两者的不同相关推荐

addEventListener()与removeEventListener()
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...
常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function...
这是因为选择器没有正确选择元素对象 document.getElementsByClassName(...)捕捉到的是该类名元素的数组正确的访问方式应该是: document.getElements ...
javascript addEventListener()
为什么80%的码农都做不了架构师?>>> element.addEventListener(event,function,useCapture) event:必须字符串指定 ...
jquery对事件的监听方法addEventListener()
在这个点击事件的监听里,我们可以获取鼠标的点击坐标 (function($){window.addEventListener("click",function(evt){for(v ...
Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
attachEvent 与addEventListener到底有什么区别呢？
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题参考文章: (1)原生js的attachEvent和addEventLis ...
关于addEventListener和attachEvent的初步探讨
关于addEventListener和attachEvent IE不对应addEventListener,只能使用attachEvent,所以首先需要判断你的浏览器对应的是哪个事件函数 if (win ...
[FLASH_AS]Flash as3 addEventListener事件监听传递参数
var event_param:String = "Hello; 对象元件.addEventListener(MouseEvent.CLICK,function (e:MouseEvent) ...
JS:attachEvent和addEventListener方法
<SCRIPT LANGUAGE="JavaScript"> <!-- /**************************************** ...

JavsScript--on与addEventListener的使用与两者的不同

Js之on和addEventListener的使用与不同

JavsScript--on与addEventListener的使用与两者的不同相关推荐

最新文章

热门文章