addEventListener調用帶參數函數

本文轉載自查看原文 2019-03-21 10:42 1370 javascript

當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

<body>
  <button id="btn">click me</button>
  <p id="show"></p>
  <script>
     var p1=5;
     var p2=7;         
     document.getElementById("btn").addEventListener("click",
       function(){
         add(p1,p2);
       })
     function add(a,b){
        var sum=a+b;
        document.getElementById("show").innerHTML=sum;  
     }
  </script>
</body>

若直接傳add(p1,p2),不需要點擊，直接顯示運算結果。

原因：

第二個參數是一個函數，傳add(p1,p2)的話，相當於傳的add(p1,p2)返回值。

addEventListener補充：

1. 可以在文檔中添加許多事件，添加的事件不會覆蓋已存在的事件。

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

2. 可以在同一個元素中添加不同類型的事件。

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

3. Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。但是，對於這些不支持該函數的瀏覽器，你可以使用 attachEvent() 方法來添加事件句柄

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流瀏覽器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js中addEventListener中第3個參數 setTimeout調用帶參數的函數的方法 JavaScript函數調用及this參數 csharp通過dll調用opencv函數，圖片作為參數 std::tuple作為參數invoke調用函數一、函數的定義、調用、返回值、參數。通過addEventListener 綁定的事件會出現多次調用方法的情況 addEventListener里面的參數和具體的使用方法 addEventListener事件監聽傳遞自定義參數 python函數調用時參數傳遞方式