/*
DOMhelp 1.0
written by Chris Heilmann
http://www.wait-till-i.com
To be featured in "Beginning JavaScript for Practical Web Development, Including AJAX"
*/
DOMhelp={
debugWindowId:'DOMhelpdebug',
init:function(){
if(!document.getElementById || !document.createTextNode){return;}
},
lastSibling:function(node){
var tempObj=node.parentNode.lastChild;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
tempObj=tempObj.previousSibling;
}
return (tempObj.nodeType==1)?tempObj:false;
},
firstSibling:function(node){
var tempObj=node.parentNode.firstChild;
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
tempObj=tempObj.nextSibling;
}
return (tempObj.nodeType==1)?tempObj:false;
},
getText:function(node){
if(!node.hasChildNodes()){return false;}
var reg=/^\s+$/;
var tempObj=node.firstChild;
while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
tempObj=tempObj.nextSibling;
}
return tempObj.nodeType==3?tempObj.nodeValue:false;
},
setText:function(node,txt){
if(!node.hasChildNodes()){return false;}
var reg=/^\s+$/;
var tempObj=node.firstChild;
while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
tempObj=tempObj.nextSibling;
}
if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}
},
createLink:function(to,txt){
var tempObj=document.createElement('a');
tempObj.appendChild(document.createTextNode(txt));
tempObj.setAttribute('href',to);
return tempObj;
},
createTextElm:function(elm,txt){
var tempObj=document.createElement(elm);
tempObj.appendChild(document.createTextNode(txt));
return tempObj;
},
closestSibling:function(node,direction){
var tempObj;
if(direction==-1 && node.previousSibling!=null){
tempObj=node.previousSibling;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
tempObj=tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling!=null){
tempObj=node.nextSibling;
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
tempObj=tempObj.nextSibling;
}
}
return tempObj.nodeType==1?tempObj:false;
},
initDebug:function(){
if(DOMhelp.debug){DOMhelp.stopDebug();}
DOMhelp.debug=document.createElement('div');
DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
},
setDebug:function(bug){
if(!DOMhelp.debug){DOMhelp.initDebug();}
DOMhelp.debug.innerHTML+=bug+'\n';
},
stopDebug:function(){
if(DOMhelp.debug){
DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
DOMhelp.debug=null;
}
},
getKey:function(e){
if(window.event){
var key = window.event.keyCode;
} else if(e){
var key=e.keyCode;
}
return key;
},
/* helper methods */
getTarget:function(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
target=target.parentNode;
}
return target;
},
stopBubble:function(e){
if(window.event && window.event.cancelBubble){
window.event.cancelBubble = true;
}
if (e && e.stopPropagation){
e.stopPropagation();
}
},
stopDefault:function(e){
if(window.event && window.event.returnValue){
window.event.returnValue = false;
}
if (e && e.preventDefault){
e.preventDefault();
}
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.stopPropagation && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
},
addEvent: function(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},
cssjs:function(a,o,c1,c2){
switch (a){
case 'swap':
o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case 'add':
if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
break;
case 'remove':
var rep=o.className.match(' '+c1)?' '+c1:c1;
o.className=o.className.replace(rep,'');
break;
case 'check':
var found=false;
var temparray=o.className.split(' ');
for(var i=0;i<temparray.length;i++){
if(temparray[i]==c1){found=true;}
}
return found;
break;
}
},
safariClickFix:function(){
return false;
}
}
DOMhelp.addEvent(window, 'load', DOMhelp.init, false);
// JavaScript Document
b={
init:function(){
b.n=document.getElementById('news');
b.addmy('click',b.litest,'li');
b.addmy('click',b.atest,'a');
b.addmy('click',b.ptest,'p');
},
addmy:function(eventname,functionname,element){
var temp=b.n.getElementByTagName(element);
for (var i=0;i<temp.length;i++)
{
temp[i].addEventListener(eventname,functionname,false);
}
},
litest:function(e){
alert('li is clicked');
},
atest:function(e){
alert('a is clicked');
},
ptest:function(e){
alert('p is clicked');
}
}
DOMhelp.addEvent(window,'load',b.init,false)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="DOMhelp.js"></script>
</head><body>
<ul id="news">
<li>
<h3><a href="#">news</a></h3>
<p>11111</p>
<p class="more"><a href="#">more link</a></p>
</li>
</ul>
</body>
</html>
解决方案 »
- 有一问题不解?Jquery 的get。传递参数,字符串长度有限制吗?
- D-tree
- 求助:关于cookie 与 iframe 的问题
- 怎样在js函数中将动态创建的select元素放入已有的表单中进行提交?
- 上框架表单,点提交后表单提交给下框架,上框架内容不变,下框架为提交页
- <table width="100%" hight="80" onselectstart="event.returnValue=false></table>中onselectstart="event.returnValue=false"的作用是
- 求助:如何及时的知道聊天室的用户的变动情况?
- 如何去掉讨厌的提示框。在线等待
- HTML缓存问题 急
- h5页面使用js实现保存当前图片到手机相册
- 简单问题,正解即结贴
- js调用显示lrc歌词文本内容
这一句只支持非ie浏览器
ie中
可以写成
if(document.all) {
tempp[i].attachEvent("on"+eventname,functionname);
}else {
temp[i].addEventListener(eventname,functionname,false);
}
b={
init:function(){
b.n=document.getElementById('news');
b.addmy('click',b.litest,'LI');
b.addmy('click',b.atest,'A');
b.addmy('click',b.ptest,'P');
},
addmy:function(eventname,functionname,element){
var temp=b.n.getElementsByTagName(element);
for (var i=0;i<temp.length;i++)
{
if(temp[i].addEventListener) temp[i].addEventListener(eventname,functionname,false);
else temp[i].attachEvent("on" + eventname,functionname);
}
},
litest:function(e){
alert('li is clicked');
},
atest:function(e){
alert('a is clicked');
},
ptest:function(e){
alert('p is clicked');
}
}
DOMhelp.addEvent(window,'load',b.init,false)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="DOMhelp.js"></script>
<script type="text/javascript">
var b={
init:function(){
b.n=document.getElementById('news');
b.addmy('click',b.litest,'li');
b.addmy('click',b.atest,'a');
b.addmy('click',b.ptest,'p');
},
addmy:function(eventname,functionname,element){
var temp=b.n.getElementsByTagName(element);
for (var i=0;i<temp.length;i++)
{
(function(){
DOMhelp.addEvent(this,eventname,functionname,false);
}).call(temp[i],eventname,functionname);
}
},
litest:function(e){
alert('li is clicked');
},
atest:function(e){
alert('a is clicked');
},
ptest:function(e){
alert('p is clicked');
}
}
DOMhelp.addEvent(window,'load',b.init,false);
</script>
</head><body>
<ul id="news">
<li>
<h3><a href="#">news</a></h3>
<p>11111</p>
<p class="more"><a href="#">more link</a></p>
</li>
</ul>
</body>
</html>
DOMhelp.addEvent(this,eventname,functionname,false);
}).call(temp[i],eventname,functionname);
}
不懂什么意思?为啥这么些?
.call(temp[i],eventname,functionname);什么意思?
你也可以用简单的for循环~·这么写是用了一个闭包~·
.call是自调方法~·然后传参数楼主如果不明白的话~·也没事~·你改成普通的for循环也能出来一样的效果 没问题的
document.all是IE专有的方法~·
所以用它来判断当前用户是不是IE浏览器
嗯 不可以~·IE下是window.event.cancelBubble = true;