js數組刪除，新增，元素刪除，事件綁定

mdk3 9年前發布 | 4K 次閱讀 JavaScript

javascript返回某個元素在數組中的索引值的indexOf方法–兼容所有瀏覽器

在現在代瀏覽器中判斷一個元素在不在一個數組中，咱們可以用Array對象的indexOf()方法來取得這個元素在當前數組中的索引值，若索引值不等于-1，數組中就存在這個元素，例如： 

var arr = [2,53,23,'test',9,'array'];
//判斷array在不在數組arr中
arr.indexOf('array') !== -1 ? alert('存在') : alert('不存在');

但是IE9以前的版本都不支持此方法，那咱們就只能擴展一個： 

Array.prototype.indexOf = function(el){
    for (var i=0,n=this.length; i<n; i++){
        if (this[i] === el){
            return i;
        }
    }
    return -1;
}

下面咱們就來檢測一下各個瀏覽器的兼容性，代碼如下： 

var arr = [2,53,23,'test',9,'array'];
if(!Array.indexOf){
    Array.prototype.indexOf = function(el){
    for (var i=0,n=this.length; i<n; i++){
        if (this[i] === el){
            return i;
        }
    }
    return -1;
     }  
}
arr.indexOf('array') !== -1 ? alert('存在') : alert('不存在');

上面就是用Array的indexOf方法來判斷數組中一個元素是否存在的方法。

數組根據索引刪除元素：

Array.prototype.del=function(n) { //n表示第幾項，從0開始算起。
//prototype為對象原型，注意這里為對象增加自定義方法的方法。
if(n<0) //如果n<0，則不進行任何操作。
return this;
else
return this.slice(0,n).concat(this.slice(n+1,this.length));
/*
concat方法：返回一個新數組，這個新數組是由兩個或更多數組組合而成的。
這里就是返回this.slice(0,n)/this.slice(n+1,this.length)
組成的新數組，這中間，剛好少了第n項。
slice方法： 返回一個數組的一段，兩個參數，分別指定開始和結束的位置。
*/
}


JS綁定事件

事件是用戶或瀏覽器自身進行的特定行為.這些事件都有自己的名字,如click(點擊),load(載入),mouseover(鼠標經過).用于響應某個事件而調用的函數稱為"事件處理函數"或者"事件監聽函數".事件處理函數有兩種分配方式:

1)在HTML頁面中:<div onclick="doSome()" />//點擊后執行JS代碼中已經定義好的函數:doSome;

2)在JS中:
var oDiv = document.getElementByIdx_x("testDiv");
oDiv.onclick = function()
{
    alert("我被點!");
}
注意:用這個分配方法時,事件處理函數名稱必須小寫:onclick,onmouseover

用其它方法綁定事件:
//兼容的方法
   
    var EventUtil = new Object;
    EventUtil.addEventHandler = function(oTarget, sEventType, fnhandler)
    {
        if(oTarget.addEventListener)
        {
            oTarget.addEventListener(sEventType, fnhandler, false);
        }//這里用了對象檢測方法判斷瀏覽器,最后的參數false表示事件在捕獲階段,若為true則表示在冒泡階段
        else if(oTarget.attachEvent)
        {
            oTarget.attachEvent("on" + sEventType, fnhandler);
        }
        else
        {
            oTarget["on" + sEventType] = fnhandler;
        }
    }
   
    EventUtil.removeEventHandler = function(oTarget, sEventType, fnhandler)
    {
        if(oTarget.removeEventListener)
        {
            oTarget.removeEventListener(sEventType, fnhandler, false);
        }
        else if(oTarget.detachEvent)
        {
            oTarget.detachEvent("on" + sEventType, fnhandler);
        }
        else
        {
            oTarget["on" + sEventType] = null;
        }
    }
    function handleClick()
    {
        alert(oDiv.style.backgroundColor);
    //    EventUtil.removeEventHandler(oDiv, "click", handleClick);
    }
    EventUtil.addEventHandler(oDiv, "click", handleClick);//添加事件
在 for 循環中動態添加事件：
  1. for(var i=; i<6; i++){  
  2.             var alink = document.createElement_x('a');  
  3.             var titleText = document.createTextNode(' ' + (i+1) + ' ');  
  4.             alink.a(titleText);  
  5.             alink.href = "javascript:void(0)";  
  6.             alink.onclick = function(){alert(i)};  
  7.             var div = document.getElementById('show-detail');         
  8.             div.a(alink);  
  9.         }  
  10. 你會發現每點擊一下，結果總是6。WHY? 這是javascript閉包特性所引起

  11. 解決問題：使用代理方法

     

    添加下面代碼：

     

    1. function delegate(fn,params,obj){  
    2.     return function(){  
    3.         fn.call(obj||window,params);  
    4.     }  
    5. }  

    6. 再將 : alink.onclick = function(){alert(i)};

      改為 :

                var pFunc = function(i){alert(i)};
                alink.onclick = delegate(pFunc,i,alink);

      即可。

 本文由用戶 mdk3 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！