一、dom事件相关
1. function addEvent(element,event,fn){
if(element.addEventListener){
element.addEventListener(event,fn);//w3c模式下支持非ie浏览器
}else if(element.attachEvent){
element.attachEvent('on'+event,fn);//ie浏览器
}
}
2. function removeEvent(element,event,fn){
if(element.removeEventListener){|//w3c模式下支持非ie浏览器移除事件绑定
element.removeEventListener(event,fn);
} else if(element.detachEvent){
element.detachEvent('on'+event,fn);
}
}
3.function EventHandler(e) {
e = e || window.event;//ie不支持event对象,是通过window.event熟悉来实现的
//防止默认行为
if(e.preventDefault) {
e.preventDefault();//W3C实现
}else{
e.returnValue =false;//IE实现
}
//停止向上冒泡
if(e.stopPropagation) {
//W3C实现
e.stopPropagation();
}else{
//IE实现
e.cancelBubble =true;
}
}
4.element.onclick =function() {//事件委托
e = e || window.event;
//获取目标对象
var targetNode = e.target || e.srcElement;//ie
//测试如果点击的是TR就触发
if(targetNode.nodeName.toLowerCase() === 'tr') {alert('You clicked a table row!');
}
}
5.阻止浏览器默认行为
e.preventDefault();//w3c
event.returnValue = false;//ie
用return false 来阻止并不能覆盖全部的事件 ~~
6.关于event.srcElement 和 event.target 的问题
event.srcElement和event.target的意思都是一样的,都是获取事件的源对象,因为浏览器的兼容问题 event.srcElement 在ie浏览器下存在这个属性 在fixFox下只存在event.target 而在chrome下 两个属性都存在;
所以为了兼容各浏览器 就采取如下方式去兼容
eventObj = event.target ? event.target : event.srcElement;