1. 程式人生 > >addEventListener調用帶參數函數

addEventListener調用帶參數函數

傳遞 ack get () strong 一個 返回 ie版本 button

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

<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);
}

addEventListener調用帶參數函數