一、首先介绍两者的用法
1.on的用法:以onclick为例
第一种:
obj.onclick = function(){
//do something..
}
第二种:
obj.οnclick= fn;
function fn (){
//do something...
}
匿名函数来传参:
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);
二、示例分析
为什么需要addEventListener?
先来看一个片段:
html代码
<div id="box">Aerchi</div>
用on的代码
1 window.onload = function(){
2 var box = document.getElementById("box");
3 box.onclick = function(){
4 console.log("我是box1");
5 }
6 box.onclick = function(){
7 box.style.fontSize = "18px";
8 console.log("我是box2");
9 }
10 }
运行结果:“我是box2”
看到了吧,第二个onclick把第一个onclick给覆盖了,虽然大部分情况我们用on就可以完成我们想要的结果,但是有时我们又需要执行多个相同的事件,很明显如果用on完成不了我们想要的,那不用猜,你们肯定知道了,对!addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
用addEventListener的代码
1 window.onload = function(){
2 var box = document.getElementById("box");
3 box.addEventListener("click",function(){
4 console.log("我是box1");
5 })
6 box.addEventListener("click",function(){
7 console.log("我是box2");
8 })
9 }
运行结果:我是box1
我是box2
addEventListenert方法第一个参数填写事件名,注意不需要写on,第二个参数可以是一个函数,第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理,第三个参数可以省略,大多数情况也不需要用到第三个参数,不写第三个参数默认false
第三个参数的使用
有时候的情况是这样的
<body>
<div id="box">
<div id="child"></div>
</div>
</body>
如果我给box加click事件,如果我直接单击box没有什么问题,但是如果我单击的是child元素,那么它是怎么样执行的?(执行顺序)
1 box.addEventListener("click",function(){
2 console.log("box");
3 })
4
5 child.addEventListener("click",function(){
6 console.log("child");
7 })
执行的结果:
child
box
也就是说,默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true,则按照事件捕获的执行顺序进行的。
1 box.addEventListener("click",function(){
2 console.log("box");
3 },true)
4
5 child.addEventListener("click",function(){
6 console.log("child");
7 })
执行的结果:
box
child
事件冒泡执行过程:
从最具体的的元素(你单击的那个元素)开始向上开始冒泡,拿我们上面的案例讲它的顺序是:child->box
事件捕获执行过程:
从最不具体的元素(最外面的那个盒子)开始向里面冒泡,拿我们上面的案例讲它的顺序是:box->child
三、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元素添加事件监听,使其在事件发生后执行相应的代码,操作。有
绑定事件有几种方式:
Event Listeners
(addEventListener
以及 IE 的 attachEvent
)
- IE 8 以及更低版本的 IE 中,需要用 attachEvent 方法:
element.attachEvent('onclick', function() { /* do stuff here*/ });
- 对于 IE 9 和更高版本的 IE,以及其它浏览器,则要用 addEventListener 方法:
element.addEventListener('click', function() { /* do stuff here*/ }, false);
用上面这种方法(DOM level 2 events),理论上可以为一个元素绑定无数个事件,实际应用中则决定于客户端的电脑内存以及浏览器。
上面的例子应用了匿名函数这个特性,还可以使用构造函数或者闭包来添加事件监听器:
var myFunctionReference = function() { /* do stuff here*/ }
element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);
另一个重要特性,则是上面这段代码中最后一行的最后一个参数,用来控制监听器对于冒泡事件的响应。95%的使用场景中,这个参数都为 false
,attachEvent
Inline Events 内联事件
(HTML 的 onclick=""
属性,以及 element.onclick
)
在所有支持 JavaScript 的浏览器中,可以用下面的方式来添加内联的事件监听器。
<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>
虽然很多有经验的开发人员对这种方式嗤之以鼻,但是它的确足够的简单粗暴。在这里你不能使用闭包或者匿名函数,并且控制域也是有限的。
还有另一种方法:
element.onclick = function () { /*do stuff here */ };
这个方法能实现相同的效果,并且有更多的控制域(因为是 JS 脚本,而不是 HTML 代码),当然了,也能使用匿名函数、构造函数、闭包。
内联事件一个明显的不足:由于内联事件是作为元素属性保存起来的,这些属性可以被覆盖,所以如果为同一个事件绑定了多个处理程序,那么最后一个处理程序会覆盖之前的程序(多谢 @谦龙 指出此处的翻译错误)。
var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };
运行上面的示例,将只会看到“did stuff #2”——第二行代码覆盖了默认的内联 onclick
谁是最佳方案?
要回答这个问题,就要考虑各个浏览器的兼容性,以及实际需求了。即使现在只需要为一个元素绑定一个事件,但是以后很可能还要同时再绑定别的事件,这个时候,就需要用 attachEvent
和 addEventListener
jQuery 以及其它的 JavaScript 框架,已经将各个浏览器的 DOM level 2 events
$(element).on('click', function () { /* do stuff */ });
在解决问题的时候,不要简单地就事论事,比如这篇文章讨论的就是如何添加事件监听器,那就不妨写一个适用于所有浏览器的方法:
function addEvent(element, evnt, funct){
// if else 结构可用三元运算符 ? : 来精简
// 这里之所以要这样写,是便于读者理解
if (element.attachEvent) // IE 8 及更低版本浏览器
return element.attachEvent('on'+evnt, funct);
else // IE 8 及以上,或其它浏览器
return element.addEventListener(evnt, funct, false);
}
// 调用示例
addEvent(
document.getElementById('myElement'),
'click',
function () { alert('hi!'); }
);
事件的传播是可以阻止的:
• 在W3c中,使用stopPropagation()方法
• 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~
3.阻止事件的默认行为,例如click <a>后的跳转~
• 在W3c中,使用preventDefault()方法;
• 在IE下设置window.event.returnValue = false;event.stopPropagation();
如下:
event.stopPropagation();
event.cancelBubble=true;
event.preventDefault();