16-添加事件的三种方式

<button id="btn">我是按钮</button>
<script>
    var oBtn = document.getElementById("btn");
</script>

• 方式一: 通过onxxx的方式来添加

  • 注意点: 由于是给属性赋值, 所以后赋值的会覆盖先赋值的

    oBtn.onclick = function () {
        alert("666");  // 这个不会弹出
    }; 
    oBtn.onclick = function () {
        alert("777");  // 只会弹出这个
    };
  

• 方式二: 通过addEventListener方法添加

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

    oBtn.addEventListener("click", function () {
       alert("666");  // 后弹 666
    });
    oBtn.addEventListener("click", function () {
        alert("777");  // 先弹 777
    });
  

• 方式三: 通过attachEvent方法添加

  • 注意点:
    1.事件名称必须加上 on
    2.后添加的不会覆盖先添加的
    3.只支持低版本的浏览器

    oBtn.attachEvent("onclick", function () {
        alert("666");  // 后弹 666
    });
    oBtn.attachEvent("onclick", function () {
        alert("777");  // 先弹 777
    });
  

• 兼容性处理

    addEvent(oBtn, "click", function () {
        alert("666");  // 后弹 666
    });
    addEvent(oBtn, "click", function () {
        alert("777");  // 先弹 777
    });
    function addEvent(ele, name, fn) {
        if (ele.attachEvent){
            ele.attachEvent("on" + name, fn);
        } else {
            ele.addEventListener(name, fn);
        }
    }