摘要：上一篇解决了IE6/7/8中同一个类型事件的多个handler执行无序的情况，为此改动也是较大的。实现几乎与前一个版本完全不同。但好处也是明显的。有时需要添加只执行一次的事件handler，为此给add方法添加第四个参数one，one为true则该事件handler只执行一次。<div id="d1" style="width:200px;height:200px;background:gold;"></div><script>var el = document.getElementById('d1')
阅读全文
摘要：上一篇中的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(
阅读全文
摘要：DOM3中引入了文本事件，其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。与keypress不同的是，该事件只会在用户输入可视字符时触发，而keypres事件则只要按下键即触发(如CapsLock，Backspace)。可看到textInput考虑的主要是字符，可以通过事件对象的data属性获取所输入字符。示例DOM3 event textInput 目前只有IE9，Chrome，Safari支持。
阅读全文
摘要：先了解几个事件对象属性target: 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。currentTarget: 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/...
阅读全文
摘要：事件对象 的获取很简单，很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定var evt = window.event || arguments[0]; 下面分四种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。1，第一种添加事件的方式，直接在html的属性中写JS代码Div1 Element大概这是上世纪90年代的写法，那时候直接把js代码写在网页中很普遍，也许那时候的js并不太重要，只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事.
阅读全文
