js 小貼士一星期合集
2024-05-06 14:10:35
供稿：網友
1.今天聊聊自定義事件
事件大家都知道，但在很多的框架中都有自定義事件的實現，我寫了個簡單的，跟大家分享一下，
代碼如下:
<script>
var cusEvent = function(){
var cache = {};
return {
addEvent:function(type,fn){
cache[type]?cache[type].push(fn):(cache[type]=[fn]);
},
removeEvent:function(type,fn){
if(cache[type]){
if(fn){
for(var i=0,ci;ci=cache[type][i];i++){
ci===fn&&cache[type].splice(i,1);
}
}else{
delete cache[type];
}
}
},
//e可以是個自定義的對象，也可以是字符串
fire:function(e){
if(typeof e =='string'){
e = {type:e}
};
var t = cache[e.type];
if(t){
for(var i=0,ci;ci=t[i];i++){
//e可以有自己的target,沒有就用this代替
ci.call(e.target||this,e)
}
}
}
}
}()
//使用
cusEvent.addEvent('start',function(e){alert(e.type)})
cusEvent.addEvent('start',function(e){alert(e.type+"1")})
cusEvent.fire('start')
cusEvent.removeEvent('start')
</script>
2. innerHTML大家都用過，肥腸好使，但在ie下有些時候卻不行，比如select如果你想在select上用option就是不行的，因為select的innerHTML是只讀的，當然除了這個還有像tr,table等等,我寫了個小方法，來兼容innerHTML在ie下對這些元素的使用，希望給大家 點啟示
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
Hello World!
<select id="aa"><option>sdfsdf</option><option>sdfsdf</option></select>
<input onclick="html(document.getElementById('aa'),'<option>change1</option><option>change</option>')" type="button" value="use innerHTML"/>
</body>
</html>
<script>
var html = function(){
var div = document.createElement('div');
return document.all?function(pN,h){
div.innerHTML = '<select>'+h+'</select>';
for(var i=0,ci;ci=pN.firstChild;) pN.removeChild(ci)
debugger;
for(;ci=div.firstChild.firstChild;) pN.appendChild(ci);
}:function(pN,h){
pN.innerHTML = h;
}
}()
</script>
原理就是在ie中，我用個臨時元素div來跳過innerHTML不能用的問題，可以再寫點負載點，就是判斷傳進來的是tr,table的話用相應的元素套用，
這個方法也可以解決select中option不好添加修改的問題
3.
在js中全局g-add變量是惡魔，是絕對建議不要使用的，但有的時候，可能要寫個靜態變量，隨著函數的執行而累計比如
代碼如下:
var a = 1;
function fn(){
alert(++a);
}
fn()
fn()
想隨著函數的執行而改變
好的寫法可以這樣
代碼如下:
<script>
var fn = function(){
var a = 1;
return function(){
