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之前被禁用的话，那上面的代码就无法工作了