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