event.js
// JavaScript Document
var eventUntil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;}},//element.onclick===element[onclick]
//删除句柄
deleHandler:function(elememt,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handle,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=handler;}},
//获取事件
getEvent:function(event){
return event?event:window.event;//解决IE8以下浏览器兼容问题
},
//获取事件元素
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;
}
}
}
eventUntil.addhandler(btn,'click',show);
eventUntil.deleHandler(btn,'click',null);
script.js
window.onload=function(){
var go=document.getElementById('go'),
box=document.getElementById('box');
eventUntil.addHandler(go,'click',function(){
alert('box');});
eventUntil.addHandler(go,'click',function(e){
e=eventUntil.getEvent(e);
alert(eventUnitil.getElement(e).nodeName);
})
}
HTML
<html>
<head>
<title>事件流</title>
<meta charset="utf-8">
<script src="event.js"></script>
<script src="script.js"></script>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onClick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<a href="event.html" id="go">跳转</a>
</div>
</body>
</head>
为什么在js文件中的对HTML的操作都显示不出来
QQ_随意
相关分类