【说明】本文转自: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事件 - 当任何元素或窗口失去焦点时。