我们在浏览网页时,点击鼠标或者按下键盘时,网页需要给我们一个相应的事件,而这种相应事件就是JavaScript与HTML进行交互,JavaScript是通过事件与HTML进行交互的。
JavaScript中事件有很多种,我们这里就直接把他包装成一个对象,方便以后兼容的调用。
<p>示例文字</p>
<script>
var eventUtil={
//事件监听
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//标准浏览器规范
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);//兼容老版IE
}else{
element['on'+type]=handler;
}
},
// 删除事件监听
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
//获取事件
getEvent:function(event){
return event?event:window.event;
},
//获取事件类型
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target || event.srcElement;
},
//阻止标签默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//阻止冒泡事件
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var p = document.getElementsByTagName("p")[0];
p.onclick = function(e){
console.log(eventUtil.getElement(e));
console.log(eventUtil.getEvent(e));
console.log(eventUtil.getType(e));
}
</script>