Js/事件处理

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()添加的匿 名函数将无法移除。

 

 

上一篇:没有getElementById引用成功的addEventListener()?


下一篇:JS中注册事件的几种方式