一起来啃犀牛书：事件处理
《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<funcs.length; i++) {
funcs[i].call(document);
}
ready = true;
funcs = null;
}
}
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler);
document.addEventListener('readystatechange', handler);
window.addEventListener('load', handler);
} else if(document.attachEvent) {
document.attachEvent('onreadystatechange', handler);
window.attachEvent('load', handler);
}
return function(f){
if (ready) f.call(document); //若准备完毕则运行
else funcs.push(f); //否则加入队列
}
}());
鼠标事件
知识点
事件属性
- 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
作者：亚里士朱德
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
