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) { // DOM2element.addEventListener(type, handler, false) ; // 冒泡阶段执行} else if(element.attachEvent) { // IEelement.attachEvent("on" + type, handler);} else { // DOM0element["on" + type] = handler;}
}
参考《JavaScript高级程序设计》(第3版)P350~P354
