js绑定点击事件的方法

点击按钮的三种方式

方式一：给对象的属性赋值

注意点：由于是将函数（function）赋值给了一个对象（oBtn）的属性（onclick），所以后赋值的会覆盖先赋值的。

    oBtn.onclick = function () {
        console.log("666");
    }
    oBtn.onclick = function () {
        console.log("777");
    }
    只打印777，不打印666

方式二：

通过addEventListener方法添加。
需要给addEventListener方法传入两个参数:

• 参数一：执行的事件.
• 参数二：事件发生后的回调方法。
• 注意点：
  1.事件名称不需要添加on
  2.后添加的不会覆盖先添加的
  3.只支持最新的浏览器IE9及以上。

•     oBtn.addEventListener("click", function () {
          console.log(666);
      })
      oBtn.addEventListener("click", function () {
          console.log(777);
      })
  

  方式三：低版本的浏览器支持的方法

• 注意点：
  1.事件名称需要添加on
  2.后添加的不会覆盖先添加的
  3.只支持IE9以下的浏览器

•     oBtn.attachEvent("onclick", function () {
           console.log(666);
       })
      oBtn.attachEvent("onclick", function () {
          console.log(777);
      })
  

  除了以上三种方法以外还有一种简便方式

• 布局html页面，放入一个button按钮即可。
  
  <button id="btn">我是按钮</button>
  1
  获取button按钮
  
  var oBtn = document.getElementById("btn");
  即可执行点击事件

  希望可以帮到大家