addEventListener调用带参数函数

当传递参数值时，使用"匿名函数"调用带参数的函数：

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

posted @ 2019-03-21 10:42 Embrace_LY 阅读(5935) 评论(0) 编辑收藏举报

Embrace_LY

addEventListener调用带参数函数

公告