正文
Js之on与addEventListener的使用与两者的不同
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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 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元素添加事件监听，使其在事件发生后执行相应的代码，操作。有了它们我们实现了页面与用户交互。 作者：Ry-yuan
本文是个人总结得出。转载请标明出处，本文地址：http://www.cnblogs.com/Ry-yuan/p/6865632.html
第一种：
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元素添加事件监听，使其在事件发生后执行相应的代码，操作。有了它们我们实现了页面与用户交互。
作者：Ry-yuan
本文是个人总结得出。
转载请标明出处，本文地址：http://www.cnblogs.com/Ry-yuan/p/6865632.html
