一般来说，用addListener的方式比直接用on的方式要好，因为用on会覆盖掉上一次同名的事件监听器，而addListener则会加一个。就好像是设计模式中的命令模式一样，每addListener一个监听器，就会把监听器push到一个数组中，触发事件时，会将数组中的所有事件依次触发出来。
如果一个代码很复杂，或者由多人维护，用on的方式很容易产生冲突，所以一般情况下，都推荐使用addListener。但有一种情况比较特别——特意需要覆盖之前的监听器。
举个例子说吧，有这样一个需求：一个页面内有很多链接，只要页面刷新或者是跳转到别的页面或者关闭当前页，都会弹出一个弹窗，询问是否确认离开，点击是才会接着执行，点击否不会执行。这个功能很多人都做过，很简单，监听window.onbeforeunload事件，event.returnValue为提示信息，就可以实现。
可是，如果再加一个需求，页面中有某一个链接，点击不会进行拦截，而是直接跳转，又该怎么做呢？
没错了，就是覆盖之前的window.onbeforeunload监听器，用一个空的执行函数代替。demo如下：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<body>
<a href="http://www.google.cn">google</a> <a href="http://www.baidu.com" id="test">百度</a>
<script type="text/javascript">
window.onbeforeunload = function(e){
var e = e || window.event;
e.returnValue = "您还没有保存";
}
var test = document.getElementById("test");
test.onclick = function(){
window.onbeforeunload = function(){};
}
</script>
</body>
</html>
=================================================================
点击google链接，或者刷新页面，或者关闭页面都会弹出弹窗，但是点击百度链接就会直接跳转了。