DOM0级
// 添加事件
var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("Clicked");
console.log(this) // this指向当前元素 };
// 删除事件
btn.onclick = null
DOM2级
DOM2 级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true,表示在捕获 阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert(this.id); 7 }, false);
使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert(this.id); }, false); btn.addEventListener("click", function(){ alert("Hello world!"); }, false);
这两个事件处理程序会按照添加它们的顺序触发,因此首先 会显示元素的 ID,其次会显示"Hello world!"消息。
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除;移 除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿 名函数将无法移除。