Snandy

摘要： 上一篇中的add有个问题，对同一类型事件添加多个hanlder时，IE6/7/8下会无序，如IE9/Firefox/Safari/Chomre/Opera会依次输出1,2,3,4,5。但IE6/7/8中则不一定。为解决所有浏览器中多个事件handler有序执行，我们需要一个队列来管理所有的handl... 阅读全文

摘要： 上一篇我们封装了一个addEvent，1，解决了IE6/7/8下事件handler中this为window的错误。2，并且统一了事件对象作为事件handler的第一个参数传入。这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了，IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上，add，remove分别添加和删除事件。E = { //添加事件 add : function(el, type, fn){ if(el.addEventListener){ el.addEventListener 阅读全文

摘要： 本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的，强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。先看看页面中添加事件的几种方式1，直接将JS代码写在HTML上<div onclick="alert(4);">Div1 Element</div>HTML Element元素自身就拥有了很多onXXX属性，只需将JS代码赋值给其就可以了。赋值给onXXX的字符串将作为响应函数的函数体（FunctionBody）。大概这是上世纪90年代的 阅读全文

摘要： 如下，<div id="d1" style="width:200px;height:200px;background:gold;"></div><script type="text/javascript"> function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.attachEvent('on' + type, fn); } } 阅读全文

摘要： 如下<div id="d1" style="width:200px;height:200px;background:gold;"></div><script> function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else if(el.attachEvent){ el.attachEvent('on'+type, fn); } } function handler( 阅读全文