javascript 事件相关

1.添加事件

》基本注册方式

<button id="info">click me!</button>

var span = document.getElementById('info');
span.onclick = function(){
  alert(1);
}

这种方式对于每种事件类型只能注册一个处理function，多了则后者覆盖前者　

》高级注册方式

IE事件模型下：

添加事件

span.attachEvent('onclick', function(){
    alert(1);
});

W3C事件模型：

span.addEventListener('onclick', function(){
    alert(1);
},false);

兼容写法：

function addEvent(elem,type,fn,useCapture){
	if(elem.attachEvent){
		elem.attachEvent('on'+type,fn);
	}else{
		elem.addEventListener(type,fn,useCapture);
	}
}

注册：

addEvent(span,'click',function(){
  alert(1);
},false);

　和基本注册方式不同的是，采用addEvent的方式可以为同一个事件注册多个处理function，并且事件触发时会按照注册的先后顺序执行。

可以注册 ，必然可以删除事件句柄：

function removeEvent(elem, type, fn) {
    if (elem.detachEvent) {
        elem.detachEvent('on' + type, fn);
        return;
    }
    if (elem.removeEventListener) {
        elem.removeEventListener(type, fn, false);
    }
}

　2.Event 对象

　事件触发时，自动可以获取Event对象，当事件发生的时候出发某个函数，该Event对象将自动在函数内可用，该对象包含了很多事件触发时候的信息，但IE却没有这么实现，而是自己实现的，IE浏览器是通过全局对象window下的event属性来包含这些信息并且可以根据event对象来获取事件源

addEvent(span,'click',function(e){
        e = e || window.event;//ie中window.event
	var taregt = e.srcElement?e.srcElement:e.target;//ie中target
 	alert(taregt.nodeName);
},false);

　也可用来阻止默认浏览器行为，比如点击a标签，阻止浏览器跳转到href链接地址，

addEvent(span,'click',function(e){
  e = e || window.event;
  if(e.preventDefault){
  	e.preventDefault();
  }else{
  	e.returnValue = 'false';
  }
},false);

　3.事件冒泡和捕获　

　　IE事件模型不存在捕获阶段，W3C事件模型中，addEventListener(type,fn,useCaputer)中useCaputer可以配置是否发生事件捕获，默认为false，即不捕获。

若配置为true，则事件注册发生在捕获阶段，

<div id="con">
    <button id="info">click me!</button>
 </div>

　

function addEvent(elem,type,fn,useCapture){
    if(elem.attachEvent){
        elem.attachEvent('on'+type,fn);
    }else{
        elem.addEventListener(type,fn,useCapture);
    }
}
var div = document.getElementById('con');
var span = document.getElementById('info');
addEvent(div,'click',function(e){
    alert('div clicked');
},true);
addEvent(span,'click',function(e){
    alert('button clicked');
},true);

　　

　可以发现，假如useCaputer设置为true，那么会先弹出div clicked后弹出 button clicked

阻止事件冒泡

假如不想让事件往上传播，则可以阻止冒泡行为，修改button注册事件的function：

addEvent(div,'click',function(e){
	alert('div clicked');
},false);
addEvent(span,'click',function(e){
	alert('button clicked');
	var e = window.event || event;
	if ( e.stopPropagation ){ //如果提供了事件对象，则这是一个非IE浏览
		e.stopPropagation();
	}else{
	//兼容IE的方式来取消事件冒泡
	window.event.cancelBubble = true;
	}
},false);

　　4.事件委托

举例来说，如果你有一个很多行的大表格，在每个<tr>上绑定点击事件是个非常危险的想法，因为性能是个大问题。流行的做法是使用事件委托。事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。

var myTable = document.getElementById('my-table');

myTable.onclick = function () {

    // 处理浏览器兼容
    e = e || window.event;
    var targetNode = e.target || e.srcElement;

    // 测试如果点击的是TR就触发
    if (targetNode.nodeName.toLowerCase() === 'tr') {
        alert('You clicked a table row!');
    }

}

事件委托依赖于事件冒泡，如果事件冒泡到table之前被禁用的话，那上面的代码就无法工作了