javascript --- > DOM0级、DOM2级、跨浏览器 的事件处理程序

DOM0级事件处理程序:

// 使用DOM0级方法指定的事件处理程序被认为是元素的方法
// 这个时候的事件处理程序是在元素的作用域中运行:
<div id = "myBtn" >DOM0</div>
<script>
    var btn = document.getElementById("myBtn");
    btn.onclick= function () {
        console.log(this);
    }
</script>

// 注1:以上生成的DOM真的能点击,给它加上一个style="cursor: pointer;"就成了一个像按钮的假按钮..(扯远了...)
// 注2:回归正题,可以看见,此时的this(执行环境)其实是dom元素的作用域.
// 注3:以DOM0级方式添加的事件,会在事件流的冒泡阶段被处理.

DOM2级处理程序:

// "DOM2级事件"定义了两个方法,用于处理指定和删除处理程序的操作:addEventListener()和removeEventListener().
// 所有的DOM元素都包含这两个方法
// 这两个方法均接受三个参数,分别是:事件名、处理函数、和一个布尔值(true:捕获阶段执行,false:冒泡阶段执行)
<div id ="myBtn">DOM2 =></div>
<script>
    // 箭头函数写法
    const btn = document.getElementById("myBtn");
    btn.addEventListener("click", ()=>{
        console.log("=>",this);}
    , false);
</script>

<div id ="myBtn1">DOM2 bubble</div>
<script>
    // 函数写法(冒泡阶段执行)
    const btn1 = document.getElementById("myBtn1");
    btn1.addEventListener("click",function (){
        console.log("bubble: ",this);}
    , false);
</script>

<div id ="myBtn2">DOM2 capture</div>
<script>
    // 函数写法(捕获阶段执行)
    const btn2 = document.getElementById("myBtn2");
    btn2.addEventListener("click",function (){
        console.log("capture: ",this);}
    , true);
</script>

// 注1:箭头函数的作用域是声明时候的作用域,普通函数则是执行时的作用域

跨浏览器事件处理程序:

// IE提供了2个不同的事件处理程序attachEvent()和deleteEvent(),
// DOM2级提供了2种addEventListener()和removeEventListener()
// 下面根据特性写一个兼容的跨浏览器的添加的事件处理程序
const l_addEvent = function (element, type, handler){
    if( element.addEventListener) {   // DOM2
        element.addEventListener(type, handler, false) ;    // 冒泡阶段执行
    } else if(element.attachEvent) {   // IE
        element.attachEvent("on" + type, handler);
    } else {   // DOM0
        element["on" + type] = handler;
    }
}

参考《JavaScript高级程序设计》(第3版)P350~P354