javascript事件

js事件存在浏览器兼容问题

firefox（w3c标准）：addEventListener(),removeEventListener()

ie :attachEvent(),detachEvent()

对js进行封装

/*
* 创建对象，往对象属性上面添加方法。调用监听器就调用对象的属性
*/
//创建对象
var eventUtil = new Object();
//简单封装模型
eventUtil.addEvent = function(dom,type,fn){
if(dom.addEventListener){//如果有这个属性
dom.addEventListenr(type,fn,false);
}else{
dom.attachEvent("on"+type,fn);
}
};
//优化封装模型
eventUtil.addEvent = function(dom,type,fn){

//	var _fn = function(){
//		var target = event.target || event.srcElement;
//		fn(event,target);
//	};
if(dom.addEventListener){
//dom.addEventListener(type,fn,false);修改
dom.addEventListener(type,function(){
var target = event.target || event.srcElement;
fn(event,target);
},false);
}else{
dom.attachEvent("on"+type,function(){
var target = event.target || event.srcElement;
fn(event,target);
});
}
};
//简单封装模型
eventUtil.removeEvent = function(dom,type,fn){
if(dom.removeEventListener){
dom.removeEventListener(type,fn,false);
}else{
dom.detachEvent("on"+type,fn);
}
};
//优化封装模型
eventUtil.removeEvent = function(dom,type,fn){
var _fn = function(event){
var target = event.target || event.srcElement;
fn(event,target);
};
if(dom.removeEventListener){
dom.removeEventListener(type,_fn,false);
}else{
dom.detachEvent("on"+type,_fn);
}
};

事件的属性：

//事件属性，触发事件都会传递一个参数
div.onclick = function() {
alert(arguments.length);//从中可以看出触发事件都会传递过来一个参数
};
div.onclick = function(event){
event = event || window.event;//兼容性代码
var target = event.target || event.srcElement;//事件源
var type = event.type;
var x = event.clientX;//获得客户端坐标
var y = event.clientY;
var screenX = event.screenX;//获得屏幕坐标
var screentY = event.screenY;
var code = event.keyCode;//获得按下键的码
};

阻止默认拦截器事件

/**
*阻止鼠标右键
*/
document.documentElement.oncontextmenu = function(event) {
event = event || window.event;
if(event.preventDefault){//ff
event.preventDefault();
}else{
event.returnValue = false;//ie
}
};