《javascript权威指南》这本书就像是js界的圣经，对于大神和新手都应该是必读书。但是这本近千页的书已经厚到让人望而生畏，要通读它不仅要时间也需要毅力。为了提升自己在js语言上的深度，所以抱着工匠精神开始研读，此文包含书中实用性较强的一些知识点和代码，算做读书笔记吧~
这一章参照的是w3c定义的3级dom事件，现在更名为 ui事件 了。
文档加载事件 知识点 load。直到文档和所有图片加载完毕时才发生 domcontentloaded。当文档加载解析完毕且所有延迟脚本都执行完毕时会出发。优先使用 readystatechange。html5标准化的事件，在load事件之前触发。 例题 定义whenready函数，类似onload函数。当文档就绪时，传递给whenready的函数就会作为document对象的方法调用。优先使用domcontentloaded和readystatechange事件。
代码
var whenready = (function(){ var funcs = [], //需要运行的函数 ready = false, //为避免重复执行 i = 0; function handler(e) { if(!ready) { //如果发生readystatechange事件，但状态不是complete则文档未准备好 if('readystatechange'===e.type && 'complete'!==document.readystate) { return ; } for (i=0;i 鼠标事件 知识点 事件属性 clientx和clienty表示鼠标坐标 altkey、metakey、ctrlkey、shiftkey html5中元素添加draggable属性之后就可以实现dragstart和dragend事件。 例题 定义drag函数实现文档元素拖动操作。
代码 drag函数绑定到mousedown事件，整个逻辑也是比较简单在mousedown事件开始时记录坐标点，然后在mousemove事件时改变css样式来实现dom元素移动，同时结束时注销事件。不过需要注意的就是dom元素必须是非静态定位。
function drag(){ //获取坐标 function getscrolloffsets(w) { var d = {}; //使用指定窗口或者当前窗口 w = w || window; //现代浏览器 if (w.pagexoffest != null) { return { x: w.pagexoffest, y: w.pageyoffset }; } //标准模式下的ie d = w.document; if (document.compatmode === 'css1compat') { return { x: d.documentelement.scrollleft, y: d.documentelement.scrolltop }; } //怪医模式下的浏览器 return { x: d.body.scrollleft, y: d.body.scrolltop }; } var scroll = getscrolloffsets(); var startx = event.clientx + scroll.x; var starty = event.clienty + scroll.y; var origx = elementtodrag.offsetleft; var origy = elementtodrag.offsettop; var deltax = startx - origx; var deltay = starty - origy; //注册鼠标移动和鼠标释放事件 if (document.addeventlistener) { document.addeventlistener(mousemove, movehandler, true); document.addeventlistener(mouseup, uphandler, true) } else if (document.attachevent) { elementtodrag.setcapture(); elementtodrag.attachevent(onmousemove, movehandler); elementtodrag.attachevent(onmouseup, uphandler); elementtodrag.attachevent(onlosecapture, uphandler) } if (event.stoppropagation) event.stoppropagation(); else event.cancelbubble = true; if (event.preventdefault) event.preventdefault(); else event.returnvalue = false; //移动鼠标时移动元素 function movehandler(e) { if (!e) e = window.event; var scroll = getscrolloffsets(); elementtodrag.style.left = (e.clientx + scroll.x - deltax) + px; elementtodrag.style.top = (e.clienty + scroll.y - deltay) + px; if (e.stoppropagation) e.stoppropagation(); else e.cancelbubble = true } //拖拽结束，注销事件 function uphandler(e) { if (!e) e = window.event; if (document.removeeventlistener) { document.removeeventlistener(mouseup, uphandler, true); document.removeeventlistener(mousemove, movehandler, true) } else if (document.detachevent) { elementtodrag.detachevent(onlosecapture, uphandler); elementtodrag.detachevent(onmouseup, uphandler); elementtodrag.detachevent(onmousemove, movehandler); elementtodrag.releasecapture() } if (e.stoppropagation) e.stoppropagation(); else e.cancelbubble = true }}
文本/键盘事件 知识点 keypress。常用的高级键盘事件。 textinput。时3级dom事件规范定义的通用事件（来源包括键盘/粘贴/拖放/声音/手写） textinput。webkit浏览器支持类似textinput的事件。 例题1 写一个过滤键盘输入的函数,当用户输入了不允许字符时显示消息元素，否则隐藏它。
代码1 (function() { var inputelts = document.getelementsbytagname(input); for (var i = 0; i < inputelts.length; i++) { var elt = inputelts[i]; if (elt.type != text || !elt.getattribute(data-allowed-chars)) continue; if (elt.addeventlistener) { elt.addeventlistener(keypress, filter, false); elt.addeventlistener(textinput, filter, false); elt.addeventlistener(textinput, filter, false) } else { elt.attachevent(onkeypress, filter) } } function filter(event) { var e = event || window.event; var target = e.target || e.srcelement; var text = null; if (e.type === textinput || e.type === textinput) text = e.data; else { var code = e.charcode || e.keycode; if (code < 32 || e.charcode == 0 || e.ctrlkey || e.altkey) return; var text = string.fromcharcode(code) } var allowed = target.getattribute(data-allowed-chars); var messageid = target.getattribute(data-messageid); if (messageid) var messageelement = document.getelementbyid(messageid); for (var i = 0; i < text.length; i++) { var c = text.charat(i); if (allowed.indexof(c) == -1) { if (messageelement) messageelement.style.visibility = visible; if (e.preventdefault) e.preventdefault(); if (e.returnvalue) e.returnvalue = false; return false } } if (messageelement) messageelement.style.visibility = hidden }}());
例题2 将输入的字符自动转换为大写
代码2 function forcetouppercase(element) { if (typeof element === string) element = document.getelementbyid(element); element.oninput = upcase; element.onpropertychange = upcaseonpropertychange; function upcase(event) { this.value = this.value.touppercase() } function upcaseonpropertychange(event) { var e = event || window.event; if (e.propertyname === value) { this.onpropertychange = null; this.value = this.value.touppercase(); this.onpropertychange = upcaseonpropertychange } }}
事件处理 事件代理 节省内存，适用于表格/列表等重复性dom元素。基本原理就是将事件绑定到祖先元素上，然后判断事件对象target，如果为对应的子元素则执行对应的逻辑。
事件创建/分发 var event = document.createevent('event');event.initevent('click');var element = document.getelementbyid('zdl');element.dispatchevent(event);
最后 这本书真是内容翔实，枯燥难读。这一章的内容看了几遍才决定以百度脑图和代码实例相结合的方式,如果有更好的建议可以发送邮件给我~感谢阅读
百度脑图下载地址： http://yalishizhude.github.io/subscribe/
博客： http://yalishizhude.github.io
作者：亚里士朱德