<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript中的事件知识</title>
<style type="text/css">
*{margin:0; padding:0}
body{font-size:12px; font-family:Arial}
ul{list-style-type:none;}
#oDiv{height:100px; width:100px; background:red;}
</style>
<script type="text/javascript">
/*
//IE下的事件是冒泡型事件
//DOM标准用的是捕获型事件
//事件是用户或浏览器自身进行的特定行为，这些事件都有自己的名字，如click,load,mouseover。
//用于响应某个事件而调用的函数称为事件处理函数(event handler),或者DOM称为事件监听函数(event listener)
*/
//如果在HTML代码中分配事件处理函数，（事件处理函数大小写都可以，如下面的onclick）
//<div onlick="alert('点击');"></div>
window.onload=function(){
var fnClick=function(){
alert("Clicked!");
}
//在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()
var oDiv=document.getElementById("oDiv");
//oDiv.attachEvent("onclick",fnClick); //为oDiv添加onclick
//删除事件则用detachEvent()
//oDiv.detachEvent("onclick",fnClick);
//用attachEvent方式可以添加多个事件处理函数,不会覆盖提前面的(包括在HTML里写的onclick)
var fnClick2=function(){
alert("Also Clicked!");
}
//书中说是会先执行fnClick, 但我在IE浏览器中的测试则是先显示的 Also Clicked! ????
//oDiv.attachEvent("onclick",fnClick2);
//DOM标准中对应的则是用addEventListener()和removeEventListener()来添加和移除事件处理函数
//不过它们要多一个第三个参数(bool型), 主要用来区分是冒泡还是捕获
//oDiv.addEventListener("click",fnClick,false); //注意没有on前缀， false表示冒泡
//oDiv.addEventListener("click",fnClick2,false); //在FF中倒是先显示的Clicked
//另外注意，在删除事件处理函数，第三个参数的bool值要同添加的时候一致，不然将不会删除
//如上面添加时用的false，则删除时也要用false
//oDiv.removeEventListener("click",fnClick,false);
//事件对象
//在IE中事件对象是window对象的一个属性event,事件处理函数必须这样访问
//尽管它是window对象的属性，但它还是只能在事件发生时访问，所有的事件处理函数执行完毕后，事件对象就被销毁
oDiv.onclick=function(){
var oEvent=window.event;
}
//IE下event常用属性方法记录
/*
cancelBubble 将其设为true则会停止事件向上冒泡
clientX,clientY 事件发生时，鼠标在客户端的区域（不包含工具栏，滚动条等）
fromElement 某些鼠标事件中，鼠标所离开的元素
keyCode 对于keypross事件，表示按下按钮的Unicode字符（如按下Enter为13）
offsetX,offSetY 鼠标相对于引起事件的对象的x,y坐标
returnValue 一般设置false来取消事件的默认动作，常用于a上面，使其不不跳转
screenX,screenY 鼠标相对于整个计算机屏幕的x,y坐标
srcElement 引起事件的元素
toElement 在鼠标事件中，鼠标正在进入的元素
type 事件的名称
x,y 鼠标相对于引起事件的元素的父元素的x,y坐标
*/
//DOM标准 与IE不同的
/*
charCode 按下的按键的Unicode值
currentTarget 事件目前所指向的元素
keyCode 按下的按键的数字代号
pageX,pageY 鼠标相对于页面的x,y坐标
preventDefault 阻止事件的默认行为
stopProgation() 调用该方法来阻止事件的冒泡
target 引起事件的元素
*/
}
function keyDown(evt) //是否按下回车的兼容处理，主要是FF下有些麻烦
{
evt=evt||window.event; //首先这里处理事件的兼容
var keyCode=evt.keyCode?evt.keyCode:evt.which?evt.which:evt.charCode;
/*
键盘事件的event对象中包含一个keyCode属性，IE中只有这一个属性，当为keydown和keyup 事件时，
keyCode属性表示你具体按下的键(也称为virtual keycode)，
当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)(Unicode)
在firefox中情况有些不同，event对象包含一个keyCode属性和一个charCode属性，
keydown和keyup事件的时候，keyCode表示的就是你具体按的键，charCode为0；当捕捉的是keypress事件时，
keyCode为0，charCode指的是你按下的字符
经过测试在firefox下： 按下Enter键时： charCode:0 which:13 keyCode:13
按下Tab键时 charCode:0 which:0 keyCode:9
按下普通字符键如a charCode:97 which:97 keyCode:0
头晕了，索性全部都写上(好像which除了按tab时是0外，其它的值都与IE相同）
*/
//alert(keyCode);
if(keyCode==13)
{
alert("你按下了Enter键！");
}
}
//格式化event对象
EventUtil={};
EventUtil.formatEvent=function(evt){
//如果是IE， 这里直接用了这种简单的检测，因为Firefox不支持document.all
//检测浏览器有对象检测，浏览器检测等方式， 对象检测比较简单
if(document.all) //IE 支持document.all
{
evt.pageX=evt.clientX+document.body.scrollLeft;
evt.pageY=evt.clientY+document.body.scrollTop;
evt.preventDefalut=function(){ //取消默认行为
this.returnvalue=false;
}
if(evt.type=="mouseout){
evt.relatedTarget=evt.toElement;
}else if(evt.type=="mouseover"){
evt.relatedTarget=evt.fromElement;
}
evt.stopPropagation=function(){ //取消事件冒泡
this.cancelBubble=true;
}
}
return evt;
}
EventUtil.getEvent=function(){
if(window.event){
return this.formatEvent(window.event);
}else{
return EventUtil.getEvent.caller.arguments[0];
}
}
</script>
</head>
<body>
<div id="oDiv">
<input type="text" id="txtKey" onkeypress="keyDown(event)" />
</div>
</body>
</html>
