一起来啃犀牛书：事件处理_html/css_WEB-ITnose
程序员文章站
2024-01-08 14:48:58
...
《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 例题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
作者：亚里士朱德