事件机制
一.事件的种类
1.鼠标
onclick 单击
ondblclick 双击
onmouseover 鼠标滑动上
onmouseout 鼠标滑动走
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousewheel|DOMMouseScroll 鼠标滚轮
2.键盘事件
onkeydown 按下
onkeyup 弹起
3.表单事件
onfocus 获取焦点
onblur 失去焦点
oninput 实时监听文本框内容的改变
onchange 失去焦点触发,监控内容的改变
onreset
onsubmit
4.页面事件
onload 加载
onresize 页面大小改变
onscroll 滚动
二.事件绑定
document.onclick = function(){
}
//绑定事件
function addEventHandler(obj,eventName,handler){
//IE 方法
if (document.attachEvent) {
return obj.attachEvent("on"+eventName,handler);
//非IE
}else {
return obj.addEventListener(eventName, handler,false);
}
}
三.移除事件
//移除
function removeEventHandler(obj,eventName,handler){
if (document.attachEvent) {
return obj.detachEvent("on"+eventName,handler);
}else {
return obj.removeEventListener(eventName, handler,false);
}
}
四.事件对象
每个事件执行的时候,在方法里有event对象,具有n多属性
function (ev){
var event = ev|| event;
}
event对象中的属性
鼠标event.clientX 鼠标移动
键盘event.keyCode 键盘字母所对应码
滚轮event.wheelDelta||event.detail
五.阻止冒泡
当子元素和父元素的事件相同时,子元素事件触发了,会引起父元素的事件也触发
function stopBubble(ev){
var event = ev||event;
if (event.stopPropagation()) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
六.阻止浏览器的默认行为
//阻止浏览器默认行为
function prevent(ev){
var event = ev||event;
if (event.preventDefault()) {
event.preventDefault();
}else{
event.returnValue = false;
}
}