function(){
	with(document){
		with(this.form){
			with(this){
				// 元素属性值
			}
		}
	}
} ## 2、DOM0级事件处理程序 事件处理程序是在元素的作用域中运行的，也就this引用当前元素。 ## 3、DOM2级事件处理程序 `addEventListener`、`removeEventListener`接受三个参数，最后一个参数是一个布尔值，false表示在冒泡阶段调用事件处理程序，true是在捕获阶段调用。通过addEventListener添加的匿名函数将无法移除。 > IE9、Firefox、Safari、Chrome、Opera支持Dom2级处理程序 ## 4、IE事件处理程序 `attachEvent`、`detachEvent`,此方法接受两个参数，事件处理程序名称和事件处理程序函数，事件都被添加到冒泡阶段；attachEvent方法内，this = window,相比Dom方法以添加事件相反顺序执行。 >跨浏览器的事件处理程序

addHandler: function (element, type, handler) {
	if (element.addEventListener) {
		element.addEventListener(type, handler, false);
	} else if (element.attachEvent) {
		element.attachEvent("on" + type, handler);
	} else {
		element["on" + type] = handler;
	}
},
removeHandler: function (element, type, handler) {
	if (element.removeEventListener) {
		element.removeEventListener(type, handler);
	} else if (element.detachEvent) {
		element.detachEvent("on" + type, handler);
	} else {
		element["on" + type] = null;
	}
},

getEvent: function (event) {
	return event ? event : window.event;
},
getTarget: function (event) {
	return event.target || event.srcElement;
},
preventDefault: function (event) {
	if (event.preventDefault)
		event.preventDefault();
	else
		event.returnValue = false;
},
stopPropagation: function (event) {
	if (event.stopPropagation) {
		event.stopPropagation();
	} else {
		event.cancelBubble = true;
	}
}, >jQuery中事件中，统一了event.preventDefault、event.stopPropagation为取消事件默认行为和冒泡，统一了this为当前对象，规定return false取消事件默认行为和冒泡。

getRelatedTarget : function (event) {
	if (event.relatedTarget) {
		return event.relatedTarget;
	} else if (event.toElement) {
		return event.toElement;
	} else if (event.fromElement) {
		return event.fromElement;
	} else {
		return null;
	}
} ### 3.4、鼠标按键 只有在主鼠标按钮被单击（或回车键被按下）时才会触发click事件，检测按钮的信息也就没必要了。对于`mousedown`或`mouseup`事件来说，其event对象存在个**button**属性，表示按下或释放时的按键。注意：Opera只有在按主鼠标键时才会触发mousedown或mouseup。

// 鼠标事件的按钮属性
getButton : function (event) {
	if (document.implementation.hasFeature("MouseEvents", "2.0")) {
		return event.button;
	} else {
		switch (event.button) {
		case 0:
		case 1:
		case 3:
		case 5:
		case 7:
			return 0; //主鼠标按钮
		case 2:
		case 6:
			return 2; //  次鼠标按钮
		case 4:
			return 1; //滚轮
		}
	}
} ### 3.5、右键事件 在`mouseup`事件中，event.button === 2,（若用mousedown，有一浏览器的button值始终是0。 ### 3.6、鼠标滚轮事件 将`mousewheel`事件处理程序指定给页面中的任何元素或document对象，最终会冒泡到document(IE8)或window（IE9、Opera、Chrome、及Safari中），即可以处理鼠标滚轮的交互操作。当向前滚动鼠标时,**wheelDelta**是120的倍数，向后时，是-120的倍数。 Opera9.5之前版本中，wheelDelta的正负数是颠倒的。

getWheelDelta : function (event) {
	if (event.wheelDelta) {
		return (browser.name == "opera" &&browser.version< 9.5) ?
		-event.wheelDelta : event.wheelDelta;
	} else {
		return -event.detail * 40;
	}
},  

// 浏览器绑定滚轮事件
EventUtil.addHandler(document, 'mousewheel', wheelFns);
EventUtil.addHandler(document, 'DOMMouseScroll', wheelFns); ## 4、键盘的DOM0级事件、文本事件 ### 4.1、键盘事件 用户按下键盘上的字符键时，触发事件顺序为`keydown`->`keypress`->`keyup`;用户按一个字符键不放时，可*重复触发*keydown和keypress事件。它们的事件对象都支持keyCode属性。

document.body.onkeydown = window.onkeydown = function(e) {
	var keyCode;
	if (!e) e = window.event;
	if (document.all) {
		keyCode = e.keyCode;
	} else {
		keyCode = e.which;
	}
	if (keyCode == 37) {
		window.location.href = "http://www.phpernote.com";
	}
	if (keyCode == 39 || keyCode == 13) {
		window.location.href = "http://www.phpernote.com";
	}
} 附keyCode参照表 主键盘上可输入值的按钮

function input(input, callback){
    if("onpropertychange"in input){//IE6/IE7/IE8
        input.onpropertychange =function(){
            if(window.event.propertyName =="value"){
                callback.call(this, window.event)
            }
        }
    }else{
// Fix Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=195696
        input.addEventListener("input", callback,false);
    }
} ## 5、变动事件 removeChild、replaceChild触发`DOMNodeRemoved`、`DOMSubtreeModified`事件

document.getElementById("test").oncontextmenu = function (event) {
	//-- do something here
	// alert("ContextMenu Popup");
	//-- prevent the default behavior
	if (document.all)
		window.event.returnValue = false; // for IE
	else
		event.preventDefault();
}; ## 2、beforeunload 绑定时，在页面卸载前可以通过它弹出窗口，来取消卸载并继续使用原有页面。为了显示弹出窗，必须将event.returnValue的值设置为要显示给用户的字符串（对IE及FireFox而言），同时作为函数的值返回（对Safari和Chrome而言）。Opera 11 及其之前的版本不支持。

// beforeunload事件
EventUtil.addHandler(window, "beforeunload", function (event) {
	event = EventUtil.getEvent(event);
	var message = "I'm really going to miss you if you go."
		event.returnValue = message;
	return message;
}) ## 3、DOMContentLoaded 支持的浏览器:IE9+、FireFox、Chrome、Safari 3.1+ 和 Opera 9+（Firefox 3+，Opera 9+，Safari 3+，Chrome 2+）

window.onerror =  function(e){
    return true;
} # 五、内存与性能 ## 1、事件委托  页面中事件处理程序的数量直接影响到页面整体的运行性能，可以通过事件委托来优化。如果可行的话，可以考虑为document对象添加一个事件处理程序。最适合采用事件委托的有click、mousedown、mouseup、keydown、keyup和keypress。 ## 2、移除事件处理程序  当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会做出恰当处理，此时要先手工移除事件，不然会存在内存泄露。 # 六、模拟事件 ## 1、DOM中的事件模拟 * 模拟鼠标事件

	varbtn = document.getElementById("myBtn");
	var event = document.createEvent("MouseEvents");
	// type bubbles cancelable view(这个参数几乎总是要设置为document.defaultView) detail screenXscreenYclientXclientYctrlKey
	// altKeyshiftKeymetaKey button relatedTarget
	event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
	btn.dispatchEvent(event); * 模拟键盘事件

	var textbox = document.getElementById("myTextbox"),
	    event;
	
	//以DOM3级方式创建
	if (document.implementation.hasFeature("KeyboardEvents", "3.0")) {
	    event = document.createEvent("KeyBoarEvent");
	    // type bubbles canclable view key location(0表示默认主键盘，1表示左，2表示右，3表示数字键盘，4表示移动设备，5表示手柄)
	    // modifiers(空格相隔的修改键列表) repeat
	event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
	}
	textbox.dispatchEvent(event); ## 2、IE中的事件模拟