1. 程式人生 > 實用技巧 >js 或 .addEventListener 解決動態繫結事件時不能傳參的問題

js 或 .addEventListener 解決動態繫結事件時不能傳參的問題

問題描述:

舉個例子,假如我們有一個div (id="div1"), 我們想給它繫結一個onclick事件並傳入字串引數:

(錯誤案例, 會導致如下後果)


會導致載入頁面時就執行了,並沒有等到點選事件觸發, 並且點選後不執行;

 var div=document.getElementById('div1');
    div.onclik=fun('傳入實參');
    function fun(arg)
    {
        alert(arg);
    }


正確的繫結方式是這樣的:

   var div=document.getElementById('div1');
    div.onclik=fun;
    function fun()
    {
        alert("");
    }


也就是直接把方法名賦給 dom物件的onclick事件,

但這樣就不能傳參了啊, 別急,老衲有一妙計
帶引數的繫結:

var div=document.getElementById('div1');
    div.onclik=function () { fun("此處傳入實參");  }
     
    function fun(arg)
    {
        alert(arg);
    }


也就是說除了直接把方法名賦給 dom物件的onclick事件,

還可以在onclick事件事件後定義一個方法, 我們可以在方法體中掉用我們真正的方法並傳入我們想要的引數,
需要注意的是:


臨時定義的這個函式中 this指的是div物件, 所以我們想傳入div物件時使用 this就可以了