一、事件流
1.含义：事件流描述的是从页面中接收事件的顺序
2.事件冒泡：是有ie提出的，即事件开始时是由具体的元素接受，然后逐步向上传播到不具体的元素
3.事件捕获：是有NC提出的，即事件开始是有不具体的元素接受，然后逐步向下传播到具体的元素上
4.DOM事件流：“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
二、事件处理程序
1.HTML事件处理程序
a.在标签中直接定义
<script type="text/javascript">
function showMessage(){
alert("Hello world!");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
b.缺陷
①存在一定的时差
②这种事件的作用链在不同的浏览器中会造成不同的结果
2.DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
3.跨浏览器
var EventUtil = {
// 添加事件监听
addEvent : function (element, type, handler) {
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
} else if (element.attachEvent)
{
element.attachEvent("on" + type, handler);
}
},
// 解除事件监听
delEvent : function (element, type, handler) {
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
} else if (element.detachEvent)
{
element.detachEvent("on" + type, handler);
}
}
}
三、事件对象
var EventUtil = {
// 获取event对象
getEvent : function (event) {
return event ? event : window.event;
},
// 获取事件源
getTarget : function (event) {
return event.target || event.srcElement;
},、
// 阻止默认行为
stopDefault : function (event) {
if (event.preventDefault)
{
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止冒泡
stopBubble : function (event) {
if (event.stopPropagation)
{
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
四、事件类型
1.UI事件，是指那些不一定和用户操作有关的事件，如load unload DOMActivate error等
①判断浏览器是否支持DOM2 HTML事件和DOM3UI事件
var isSupported = document.implementation.hasFeature("UIEvent", "3.0");
②load事件，当页面加载完成后（img js css）触发的事件
a.加载img
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
b.加载JS
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
c.加载CSS
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
②Unload事件，当从一个页面切换到另一个页面，就会被调用，常常用于清除引用，避免内存泄露
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
③Resize事件，当窗口大小发生改变时触发的事件
EventUtil.addHandler(window, "resize", function(event){
alert("size changed");
});
④Scroll事件，表示页面元素的变化，会在文档被滚动的时候触发。
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
2.焦点事件，主要为Blur()和focus()方法
①判断浏览器是否支持焦点事件
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
②获焦与失焦
EventUtil.addHandler(txt, "focus", function(event){
alert("focus");
});
EventUtil.addHandler(txt, "blur", function(event){
alert("blur");
});
3.鼠标与滚轮事件
①判断浏览器是否支持鼠标事件
var isSupported = document.implementation.hasFeature("MouseEvents", "3.0");
②客户区坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
③页面坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;
if (pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});
④屏幕坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
⑤修改键
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
⑥相关元素。例如，将鼠标的光标放在一个div上，那么当他触发事件mouseout时，它的主元素时div，而相关元素则是body；当他触发的事件为mouseover时，它的主目标是body，而相关元素时div。
var EventUtil = {
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;
}
}
}
⑦鼠标按钮
var EventUtil = {
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;
}
}
}
}
⑧滚轮事件
var EventUtil = {
getWheelDelta : function (event) {
if (event.wheelDelta)
{ // opera 9.5以下
return (client.engine.opera && client.engine.opera < 9.5) ?
- event.wheelDelta : event.wheelDelta;
} else {
// 火狐
return - event.detail * 40;
}
}
}
4.键盘与文本事件 keydown keyup keypress 和textInput事件
①键码，就是按键的码号。用keyCode表示
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
event = EventUtil.getEvent(event);
alert(event.keyCode);
});
②字符编码
var EventUtil = {
getCharCode : function (event) {
if (typeof event.charCode == "number")
{
return event.charCode;
} else {
return event.keyCode;
}
},
}
③DOM3中添加了一个textInput事件，它不同于keyPress中的textInput事件，它有一个data属性，用于专门识别字符。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
5.事件变动，在DOM结构树发生变化时，会触发一系列的事件
eg: <body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
①删除节点
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", function(event){
alert(event.type);
alert(event.target);
});
list.parentNode.removeChild(list);
});
③插入节点
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item 4"));
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeInserted", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
alert(event.type);
alert(event.target);
});
list.appendChild(item);
});
6.html5事件
①ContextMenu事件，用于何时应该显示上下文菜单，以供开发人员自定义菜单
<body>
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
Click anywhere else to get the default context menu.</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
silver">
<li><a href="http://www.nczonline.net">Nicholas’site</a></li>
<li><a href="http://www.wrox.com">Wrox site</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>
</body>
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
document.getElementById("myMenu").style.visibility = "hidden";
});
});
②Beforeunload事件，在页面卸载之前调用的事件，其中的event.returnValue表示请求留下的语句
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;
});
③DOMContentLoaded事件表示DOM被加载完后触发
④Pageshow和pagehide事件
当页面再次load一个page时，页面会从缓存bfcache中调用内容中的数据、js文件等，这是会触发一个pageshow的事件。该事件的目标元素随时document，但是要添加到window中去。在单击浏览器的前进和后退的按钮时，可以被调用，此现象被称为往返缓存。
(function(){
var showCount = 0;
EventUtil.addHandler(window, "load", function(){
alert("Load fired");
});
EventUtil.addHandler(window, "pageshow", function(){
showCount++;
alert("Show has been fired " + showCount +
" times. Persisted? " + event.persisted);
});
})();
五、内存和性能
1.事件委托，只指定一个事件处理程序，就可以管理某一类型的所有事件
eg: <ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});
2.移除事件处理程序 当某些特定的事件处理程序没有必要存在的时候，我们可以解除它的绑定事件函数。
<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//先执行某些操作
btn.onclick = null; //移除事件处理程序
document.getElementById("myDiv").innerHTML = "Processing...";
};
</script>
六、模拟事件，即通过javascript来触发事件，而不是通过用户点击操作浏览器触发
①步骤
a.document.createEvent(字符串),创建并返回一个event对象
b.在创建并返回event对象后，要为其函数进行初始操作
c.触发事件，用btn.dispatchEvent(event);
②模拟单击按钮事件
// DOM中
var btn = document.getElementById("myBtn");
//创建事件对象
var event = document.createEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
//触发事件
btn.dispatchEvent(event);
// Less IE8中
ar btn = document.getElementById("myBtn");
//创建事件对象
var event = document.createEventObject();
//初始化事件对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//触发事件
btn.fireEvent("onclick", event);
