事件监听器

事件监听器

1. 第一种绑定方法：

<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
	console.log("九尺龙泉万卷书，上天生我意何如。");
}
btn.onclick = function(){
	console.log("不能报国平天下，枉为男儿大丈夫");
}
</script>

这种绑定方法可以看出容易重叠
2. 第二种绑定方法（事件监听）

<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
function fn1(){
	console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
	console.log("不能报国平天下，枉为男儿大丈夫。");
}
btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2);

事件监听的方法不会重叠，其原理应该就是在绑定新事件之间，先判断该事件是否已经有绑定过得，如果有，先执行原来的。即下面的这段代码

var btn = document.getElementsByTagName("button")[0];
function fn1(){
	console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
	console.log("不能报国平天下，枉为男儿大丈夫。");
}
fn("click",fn1,btn);
fn("click",fn2,btn);
//str是触发的事件，fn是调用的函数，ele是绑定事件的元素节点
function fn(str,fn,ele){
	var oldEvent = ele["on"+str];
	ele["on"+str] = function(){
		if(oldEvent){
			oldEvent();
			fn();
		}else{
			fn();
		}
	}
}