转载

一起来啃犀牛书:事件处理

《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

作者:亚里士朱德

原文  http://yalishizhude.github.io/2016/03/14/rhinoceros-event/
正文到此结束
Loading...