【笔记】 《js权威指南》- 第17章 事件处理 - 17.4 - 17.6

1.文档就绪时调用函数：

/*
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
 */
var whenReady = (function() {               //这个函数返回whenReady()函数
    var funcs = [];             //当获得事件时，要运行的函数
    var ready = false;          //当触发事件处理程序时,切换为true
    
    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if(ready) return;       //确保事件处理程序只完整运行一次
        
        //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
        if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
        
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for(var i=0; i<funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件处理函数完整执行,切换ready状态, 并移除所有函数
        ready = true;
        funcs = null;
    }
    //为接收到的任何事件注册处理程序
    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false);            //IE9+
        window.addEventListener('load', handler, false);
    }else if(document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    //返回whenReady()函数
    return function whenReady(fn) {
        if(ready) { fn.call(document); }
        else { funcs.push(fn); }
    }
})();

2.鼠标事件：

(1). 鼠标事件类型：

(2). event.clientX,Y给出鼠标视口坐标；

(3). event.altKey, ctrlKey, metaKey, shiftKey属性指定是否有辅助按键；

(4). 拖曳例子：

function drag(elementToDrag, event) {
	var startX = event.clientX, startY = event.clientY;
	var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
	var deltaX = startX - origX, deltaY = startY - origY;
	if (document.addEventListener) {
		document.addEventListener("mousemove", moveHandler, true);
		document.addEventListener("mouseup", upHandler, true);
	} else {
		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;
		elementToDrag.style.left = (e.clientX - deltaX) + "px";
		elementToDrag.style.top = (e.clientY - 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 {
			elementToDrag.detachEvent("onlosecapture", upHandler);
			elementToDrag.detachEvent("onmouseup", upHandler);
			elementToDrag.detachEvent("onmousemove", moveHandler);
			elementToDrag.releaseCapture();
		}
		if (e.stopPropagation)
			e.stopPropagation();
		else
			e.cancelBubble = true;
	}

}

3.鼠标滚轮事件：

使用滚轮网例子：

var frame = document.createElement("div");
var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 && navigator.userAgent.indexOf("Webkit") !== -1);
var isFirefox = navigator.userAgent.indexOf("Gecko") !== -1;

//将来的浏览器
frame.onwheel = wheelHandler;
//大多数浏览器
frame.onmousewheel = wheelHandler;
if (isFirefox) {
	frame.addEventListener("DOMMouseScroll", wheelHandler, false);
}

function wheelHandler(event) {
	//如果没用到DOMMouseScroll
	if (isFirefox && e.type != "DOMMouseScroll") {
	frame.removeEventListener("DOMMouseScroll", wheelHandler, false);
}
	
	var e = event || window.event;
	var deltaX = e.deltaX * -30 || //deltaX对应wheel事件,表示一次滚动
	e.wheelDeltaX / 4 || //对应mousewheel事件，一次滚动的值为120
	0; //其他
	var deltaY = e.deltaY * -30 || e.wheelDeltaY / 4 || (e.wheelDeltaY === undefined && e.wheelDelta / 4) || //没有2D属性，使用1D
	e.detail * -10 || //FireFox的DOMMouseScroll事件
	0;
	
	//Mac浏览器对滚轮的检测更为灵敏
	if (isMacWebkit) {
		deltaX /= 30;
		deltaY /= 30;
	}
}