JavaScript之事件绑定

摘要: 事件流流到了哪里，哪里就触发相应的事件，如果触发事件的元素节点给触发事件绑定了动作，那么就会触发相应的动作了。

事件监听器和事件流有很大关系，可以说当一个元素上触发一个事件的时候，如果这个事件是支持捕获和冒泡的，如一个div元素触发了click事件，那么从document到这个div，再从这个div到document所有经过的元素都会触发click事件。而如果被触发click事件的元素绑定的触发click事件时发生的动作，那么就会执行相应的动作了。

这里主要说下给元素添加事件的事。给一个元素绑定事件主要有以下几种方法：

1. 直接把动作绑定到元素标识的属性上

//这种方式，一个元素一个事件只能绑定一个函数
<div onClick='alert(“hello world!”)'></div>
<div onClick='clickFn(this)'></div>
<div onClick='clickFn(1,2)'></div>

2. 把动作绑定到元素对象属性上

<div id='testDiv' onClick='alert("1")' onClick='alert("2")'></div>
<script>
var testDiv=document.getElementById('testDiv');
//将函数的引用赋值给元素对象的事件属性，这个函数也可以是匿名函数，这种方式一个元素一个事件只能绑定一个函数
testDiv.onclick=clickFn;
function clickFn(){
alert('testDiv');
}
</script>
//当点击testDiv的时候回弹出  testDiv 。

第一种绑定方式和第二种绑定方式在给同一个元素绑定同一个事件动作的时候，第二种方式会覆盖第一种方式。

3. W3C DOM 级别2定义的事件绑定机制（addEventListener）。IE8.0及其以下版本不支持该方法，使用attachEvent()来绑定事件监听函数。

<div class="contener" id="contener" onclick='alert("1")' onclick="alert('2')">
<script>
var EventListener = {
add:function(element,type,func,captureFlag){
if(element.addEventListener){
EventListener.add=function(element,type,func,captureFlag){
captureFlag=captureFlag || false;
element.addEventListener(type,func);
}
}else if(element.attachEvent){
EventListener.add=function(element,type,func,captureFlag){
element.attachEvent("on" + type,func);
}
}else{
EventListener.add=function(element,type,func,captureFlag){
element["on" + type] = func;
}
}
EventListener.add(element,type,func,captureFlag);
},
remove:function(element,type,func,captureFlag){
if(element.addEventListener){
EventListener.remove=function(element,type,func,captureFlag){
captureFlag=captureFlag || false;
element.removeEventListener(type,func);
}
}else if(element.detachEvent){
EventListener.remove=function(element,type,func,captureFlag){
element.detachEvent("on" + type,func);
}
}else{
EventListener.remove=function(element,type,func,captureFlag){
element["on"+type] = null;
}
}
EventListener.remove(element,type,func,captureFlag);
}
}
var contener=document.getElementById('contener');
EventListener.add(contener,'click',Alert);
function Alert(){
alert('hello world!');
}
</script>

使用了第一种或者第二种方式给元素某个事件绑定动作，还可以使用第三种方式给该事件绑定动作，触发此事件的时候，该事件绑定的几个动作都会触发。使用第三种方式可以给元素某个事件绑定多个动作，而使用第一种或第二种方式只能绑定一个动作。