JavaScript单击事件的绑定

第一种：btn.onclick = function(){};
第二种：btn.addEventListener(“click”, function () { }, false);
第三种：btn01.attachEvent(“onclick”,function(){ });
现在我们就先看看这三种单击事件的区别：
第一种，使用对象.事件 = 函数的形式绑定响应函数，这种同时一个元素绑定一个响应函数，如果绑定好几个，那么后面就会覆盖前面的函数事件。第二种，是通过监听事件addEventListener实现的。现在，我们可以好好看下这个函数element.addEventListener(event, fn, useCapture);第一个参数event：事件名称，例如 ’click‘，注意事件名称前面不能加“on”，第二个参数是回调函数，第三个参数，如果是useCapture:{boolean} true使用事件捕获；false使用事件冒泡（默认值）
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>案例045</title>
                  <script>
                                    window.onload = function () {
                  
                                                      var btn = document.getElementById("btn");
                                                     /* btn.addEventListener("click", function () {
                                                                        alert("1");
                                                      }, false);

                                                      btn.addEventListener("click", function () {
                                                                        alert("2");
                                                      }, false);

                                                      btn.addEventListener("click", function () {
                                                                        alert("3");
                                                      }, false);
                                                      */

                                                      bindObj(btn,"click",function(){
                                                                        alert(this);
                                                      })
                                                      
                                                      function bindObj(obj, eventStr, callback) {
                                                                        if (obj.addEventListener) {
                                                                                          //大部分浏览器兼容的方式
                                                                                          obj.addEventListener(eventStr, callback, false);
                                                                        } else {
                                                                                          /*
                                                                                           * this是谁由调用方式决定
                                                                                           * callback.call(obj)
                                                                                           */
                                                                                          //IE8及以下
                                                                                          obj.attachEvent("on" + eventStr, function () {
                                                                                                            //在匿名函数中调用回调函数
                                                                                                            callback.call(obj);
                                                                                          });
                                                                        }
                                                      };   
                                    }                           
                  </script>
</head>

<body>
                  <button id="btn">按钮</button>
</body>

</html>

在这里插入图片描述

JavaScript单击事件的绑定

悦读