JavaScript事件模型

【说明】本文转自：http://blog.sina.com.cn/s/blog_6644703f0100l1gd.html

事件流：就是按照一定的传播方向的流程。

事件冒泡（IE）：从最里层向最外层传播。（没有事件捕获）

事件捕获（DOM）：从最外层向最里层传播。（DOM有事件冒泡）

事件处理

传统事件处理程序指派方法：

如：<script type="text/javascript">

alert("点击");

</script>

现代事件处理程序指派方法：

如（兼容DOM和IE）：

var fnclick1 = function(){alert("点击1");}

var fnclick2 = function(){alert("点击2");}

var oDiv = document.getElementById("div1");//此处原文是getElementByIdx_x，我没有成功，就用getElementById代替了。

if(document.addEventListener){ //DOM类

oDiv.addEventListener("click",fnclisk1,true);

oDiv.addEventListener("click",fnclisk2,true);

}

else if(docement.attachEvent){ //IE类

oDiv.attachEvent("onclick",fnclick1);

oDiv.attachEvent("onclick",fnclick1);

 

}

事件处理的返回值

1. click：单选按钮和复选按钮的取消；

2. dragdrop：取消拖拽；

3. keydown：在用户按住不放时，取消随后的keypress事件；

4. keypress：取消keypress事件；

5. mousedown：取消默认行为（拖拽开始、选择的开始、解除链接）

6. mouseover：导致对window的status或defaultStatus属性的改变被浏览器忽略；

7. submit：取消表单提交。

Event对象：1.触发事件对象；2.事件发生时的鼠标信息；3.事件发生时的键盘信息。

DOM和IE相同点：

1. 获取事件的类型：var sTypt = oEvent.type;

2. 获取键盘代码(keydown/keyup)：var iKeyCode = oEvent.keyCode;

3. 检测shift alt ctrl：

var bShift = oEvent.shiftkey;

var bAlt = oEvent.altkey;

var bCtrl=oEvent.ctrlkey;

4获取客户区坐标：

var iClickX = oEvent.clientX;

var iClickY = oEvent.clientY;

5.获取屏幕坐标：

var iScreenX = oEvent.screenX;

var iScreenY = oEvent.screenY;

DOM和IE的不同点：

1. 获取目标

a) var oTarget = oEvent.srcElement; (IE)

b) var oTarget = oEvent.target; (DOM)

2. 获取字符码

a) var iCharCode = oEvent.keyCode; (IE)

b) var iCharCode = oEvent.charCode;(DOM)

3. 阻止事件的默认行为

a) oEvent.returnValue = false;  (IE)

b) oEvent.preventDefault();   (DOM)

4. 中止事件传播

a) oEvent.cancelBubble = true; (IE)

b) oEvent.stopPropagation();  (DOM)

事件类型： 1.鼠标类型；2.键盘类型；3.HTML类型。

1.鼠标事件：

click - 用户单击;

dblclick - 用户双击;

mousedown - 当用户任意按下鼠标按钮时;

mouseout - 当光标在一个元素上,并且用户将其移出元素边界时,发Mouseout事件;

mouseover - 当光标在一个元素外,并且用户将其移到元素上时,发Mouseover事件;

mouseup - 当用户释放任何鼠标按钮时;

mousemove - 当光标在一个元素上时.

2.键盘事件：

keydown - 当用户在键盘上按下一个键时发生，如果用户按着不放就重复发生；

keypress - 当用户在键盘上按下一个字符键（不包括shist和alt）时发生；

keyup - 当用户释放一个按下的键时发生。

3.HTML事件：

load事件 - 当页面全部加载时；

unload事件 - 当页面全部卸载时；

abort事件 - 当用户中止装载进程之前；

error事件 - 当一个javascript错误发生时;

select事件 - 在文本框中选择一个到多个字符时；

change事件 - 在文本框中当它失去焦点时；

submit事件 - 当表单的提交按钮被点击时；

reset事件 - 当表单的重置按钮被点击时；

resize事件 - 当窗口或框架尺寸调整时；

scroll事件 - 当有用户滚动有滚动条的任何元素时；

focus事件 - 当任何元素或窗口获取焦点时；

blur事件 - 当任何元素或窗口失去焦点时。