JavaScript 事件模型总结

1: 0级DOM

包括IE，FF，Safari等主流浏览器均支持，也是最经常使用的事件模型

<br>
It's easy to use, and also we are frequently using it.<br><br><div style="background-color: rgba(128, 128, 128, 1); font-family: Sans-Serif; font-weight: bold">2: Level 2 DOM</div>
<br>
Every mainstream browsers supports the level 2 APIs except IE.<br><div style="background-color: rgba(128, 128, 128, 1); font-family: Sans-Serif">Evnt Spread: </div>
<br>
step 1: capturing, spread to DOM node from "document", if any of the parent nodes have registered the special handler, then will run these handlers.<br>
step 2: event occurs, just like level 0 DOM, the event will happen on the Node.<br>
step 3: bubbling, it means the event will bubble-up to the "document", but not all the events will bubble-up, like: blur, focus, load, unload will never bubble-up. Also we can stop bubble-up with stopPropagation()<br><textarea style="border: solid rgba(0, 0, 0, 1); background-color: rgba(192, 192, 192, 1)" class="brush:html;gutter:false;toolbar:true">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag element page</title>
</head>
<script type="text/javascript">
function drag(elementToDrag, event) {
//The mouse position
var startX = event.clientX, startY = event.clientY;
//The ole position of the element
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
//The difference between mouse and element, never change this difference
var deltaX = startX - origX, deltaY = startY - origY;
if (document.addEventListener) { //Common Dom 2 moudle
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else { //IE 5+ event moudle
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
//Lose mouse capture
elementToDrag.attachEvent("onlosecapture", upHandler);
}
/*
This is the handler that captures mousemove events
*/
function moveHandler(e) {
if (!e) { e = window.event; } //IE event moudle
/*
//fix the move area if need
if ((e.clientX < deltaX) ||
(e.clientY < deltaY) ||
(e.clientX > document.getElementById("areaId").style.width - (origY - deltaY)) ||
(e.clientY > document.getElementById("areaId").style.top - (origX - deltaX))) return;
*/
//move the element to current position
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
//stop bubble-up
if (e.stopPropagation) {
e.stopPropagation(); //Common DOM level 2
}
else e.cancleBubble = true; //IE
}
/*
This is the handler that captures the final mouseup occurs
remove/detach the DOM 2 events
*/
function upHandler(e) {
if (!e) { e = window.event; } //IE event moudle
if (document.removeEventListener) { //Common Dom 2 moudle
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else { //IE 5+ event moudle
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
//stop bubble-up
if (e.stopPropagation) {
e.stopPropagation(); //Common DOM level 2
}
else e.cancleBubble = true; //IE
}
}
</script>
<body style="background-color: InfoBackground;">
<div style="position: absolute; left: 100px; top: 100px; width: 250px; height: 150px;
background-color: White; border: solid black;">
<div style="background-color: Gray; border-bottom: dotted black; padding: 3px; font-family: Sans-Serif;
font-weight: bold;" onselectstart="return false;" onmousedown="drag(this.parentNode, event)">
Drag Me</div>
<p>
This is a test. testing, testing, testing.</p>
<p>
This is a test.</p>
<p>
Test.</p>
</div>
</body>
</html>

5: Create user event segment

DOM
- Document.createEvent()
- dispatchEvent()
- Event.initEvent(), UIEvent.initEvent(), MouseEvent.initMouseEvent()
IE
- Document.createEventObject
- fireEvent()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>合成事件</title>
</head>
<script type="text/javascript">
var DataEvent = {};
/*
Send a synthetic ondataavailable event to the specified target.
*/
DataEvent.send = function(target, datatype, data) {
if (typeof target == "string") target = document.getElementById(target);
var e;
//Create an event object
if (document.createEvent) { //DOM event moudle
e = document.createEvent("Events");
e.initEvent("dataavailable", true, false); //String:eventType, boolean:canBubble, booleab:cancelable
}
else { //IE event moudle
e = document.createEventObject();
}
//Add some custom properties to the event object
e.datatype = datatype;
e.data = data;
if (target.dispatchEvent) target.dispatchEvent(e); //DOM
else if (target.fireEvent) target.fireEvent("ondataavailable", e); //IE
};
/*
Register an event handler for ondataavailable.
*/
DataEvent.recive = function(target, handler) {
if (typeof target == "string") target = document.getElementById(target);
if (target.addEventListener) {
target.addEventListener("dataavailable", handler, false);
}
else if (target.attachEvent) {
target.attachEvent("ondataavailable", handler);
}
};
</script>
<script type="text/javascript">
window.onload = function() {
DataEvent.recive(document.getElementById("button1"), dataHandler); //bind event
DataEvent.send(document.getElementById("button1"), "string", "My Data!"); //create event
}
function dataHandler(e) {
alert(e.datatype);
}
</script>
<body>
<div >
<input value="button"  />
</div>
</body>
</html>

遗留问题：添加eventlistener后，create event并且dispatch这个事件，然后就等于触发这个事件？
若想要做成跟onclick，onload这些完全一样该如何实现？