js 小贴士一星期合集_javascript技巧

1.今天聊聊自定义事件
事件大家都知道，但在很多的框架中都有自定义事件的实现，我写了个简单的，跟大家分享一下，

复制代码 代码如下:

<script> <BR>var cusEvent = function(){ <BR>var cache = {}; <BR>return { <BR>addEvent:function(type,fn){ <BR>cache[type]?cache[type].push(fn):(cache[type]=[fn]); <BR>}, <BR>removeEvent:function(type,fn){ <BR>if(cache[type]){ <BR>if(fn){ <BR>for(var i=0,ci;ci=cache[type][i];i++){ <BR>ci===fn&&cache[type].splice(i,1); <BR>} <BR>}else{ <BR>delete cache[type]; <BR>} <BR>} <BR>}, <BR>//e可以是个自定义的对象，也可以是字符串 <BR>fire:function(e){ <BR>if(typeof e =='string'){ <BR>e = {type:e} <BR>}; <BR>var t = cache[e.type]; <BR>if(t){ <BR>for(var i=0,ci;ci=t[i];i++){ <BR>//e可以有自己的target,没有就用this代替 <BR>ci.call(e.target||this,e) <BR>} <BR>} <BR>} <BR>} <BR>}() <BR>//使用 <BR>cusEvent.addEvent('start',function(e){alert(e.type)}) <BR>cusEvent.addEvent('start',function(e){alert(e.type+"1")}) <BR>cusEvent.fire('start') <BR>cusEvent.removeEvent('start') <BR></script>

2. innerHTML大家都用过，肥肠好使，但在ie下有些时候却不行，比如select如果你想在select上用option就是不行的，因为select的innerHTML是只读的，当然除了这个还有像tr,table等等,我写了个小方法，来兼容innerHTML在ie下对这些元素的使用，希望给大家 点启示

复制代码 代码如下:

Hello World!
sdfsdf sdfsdf



<script> <BR>var html = function(){ <BR>var div = document.createElement('div'); <BR>return document.all?function(pN,h){ <BR>div.innerHTML = '<select>'+h+''; <BR>for(var i=0,ci;ci=pN.firstChild;) pN.removeChild(ci) <BR>debugger; <BR>for(;ci=div.firstChild.firstChild;) pN.appendChild(ci); <BR>}:function(pN,h){ <BR>pN.innerHTML = h; <BR>} <BR>}() <BR></script>

原理就是在ie中，我用个临时元素div来跳过innerHTML不能用的问题，可以再写点负载点，就是判断传进来的是tr,table的话用相应的元素套用，
这个方法也可以解决select中option不好添加修改的问题
3.
在js中全局g-add变量是恶魔，是绝对建议不要使用的，但有的时候，可能要写个静态变量，随着函数的执行而累计比如

复制代码 代码如下:

var a = 1;
function fn(){
alert(++a);
}
fn()

fn()
想随着函数的执行而改变
好的写法可以这样

复制代码 代码如下:

<script> <BR>var fn = function(){ <BR>var a = 1; <BR>return function(){ <BR>alert(++a); <BR>} <BR>}() <BR>fn(); <BR>fn(); <BR></script>

a作为闭包，可以被内部的function访问到，但在全局中却没有产生一个全局的a
当然如果你想直接修改a也可以

复制代码 代码如下:

<script> <BR>var fn = function(){ <BR>var a = 1; <BR>return function(p){ <BR>a = p===undefined?a+1:p; <BR>alert(a); <BR>} <BR>}() <BR>fn(); <BR>fn(0); <BR></script>

4.
传统的方式一般是用el.offsetParent,el.offsetLeft遍历去取得
但其实又跟好的跟容易的方式那就是 getBoundingClientRect
代码如下

复制代码 代码如下:

<script> <BR>var offset = function (o){ <BR>var d = document,m = Math.max,bl = m(d.body.clientLeft,d.documentElement.clientLeft),st,sl, <BR>bt = m(d.body.clientTop,d.documentElement.clientTop),b,bb = document.getElementById('bb'); <BR>return function(o){ <BR>b = o.getBoundingClientRect(); <BR>st = m(d.body.scrollTop,d.documentElement.scrollTop),sl = m(d.body.scrollLeft,d.documentElement.scrollLeft); <BR>bb.style.cssText +=";top:"+(b.top+st-bt)+'px;left:'+(b.left+sl-bl)+"px"; <BR>} <BR>}() <BR></script>

当你点击最下边的灰色的div时，上边的红色的会跟灰色的完全重叠
5.
ie下的outerHTML大家都用过吧，肥肠好用，在你不仅仅只想返回某个元素下的html,还想返回这个元素的html
但是这个属性只能用在ie下，别的浏览器没有这个属性，怎么办呢，
js小贴士帮你解决这个问题

复制代码 代码如下:

sdf

<script> <BR>var html = function(){ <BR>var d = document,div = d.createElement('div'); <BR>return function(id){ <BR>var o = d.getElementById(id); <BR>if(o.outerHTML) <BR>return o.outerHTML; <BR>else{ <BR>div.innerHTML = '' <BR>var h = ''; <BR>div.appendChild(o.cloneNode(true)); <BR>return div.innerHTML <BR>} <BR>} <BR>}() <BR>alert(html('aa')) <BR>alert(html('bb')) <BR></script>